<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Cartzilla | Widgets</title>
    <!-- SEO Meta Tags-->
    <meta name="description" content="Cartzilla - Bootstrap E-commerce Template">
    <meta name="keywords" content="bootstrap, shop, e-commerce, market, modern, responsive,  business, mobile, bootstrap, html5, css3, js, gallery, slider, touch, creative, clean">
    <meta name="author" content="Createx Studio">
    <!-- Viewport-->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- Favicon and Touch Icons-->
    <link rel="apple-touch-icon" sizes="180x180" href="../apple-touch-icon.png">
    <link rel="icon" type="image/png" sizes="32x32" href="../favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="16x16" href="../favicon-16x16.png">
    <link rel="manifest" href="../site.webmanifest">
    <link rel="mask-icon" color="#fe6a6a" href="../safari-pinned-tab.svg">
    <meta name="msapplication-TileColor" content="#ffffff">
    <meta name="theme-color" content="#ffffff">
    <!-- Vendor Styles including: Font Icons, Plugins, etc.-->
    <link rel="stylesheet" media="screen" href="../vendor/simplebar/dist/simplebar.min.css"/>
    <link rel="stylesheet" media="screen" href="../vendor/tiny-slider/dist/tiny-slider.css"/>
    <link rel="stylesheet" media="screen" href="../vendor/prismjs/themes/prism.css"/>
    <link rel="stylesheet" media="screen" href="../vendor/prismjs/plugins/toolbar/prism-toolbar.css"/>
    <link rel="stylesheet" media="screen" href="../vendor/prismjs/plugins/line-numbers/prism-line-numbers.css"/>
    <link rel="stylesheet" media="screen" href="../vendor/nouislider/distribute/nouislider.min.css"/>
    <!-- Main Theme Styles + Bootstrap-->
    <link rel="stylesheet" media="screen" href="../css/theme.min.css">
    <!-- Google Tag Manager-->
    <script>
      (function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
      new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
      j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
      'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
      })(window,document,'script','dataLayer','GTM-WKV3GT5');
    </script>
  </head>
  <!-- Body-->
  <body>
    <!-- Google Tag Manager (noscript)-->
    <noscript>
      <iframe src="//www.googletagmanager.com/ns.html?id=GTM-WKV3GT5" height="0" width="0" style="display: none; visibility: hidden;"></iframe>
    </noscript>
    <main class="container-fluid">
      <!-- Main content-->
      <section class="offcanvas-enabled row pb-3 pb-md-4">
        <div class="col-xxl-9">
          <!-- Navbar-->
          <header class="navbar navbar-expand navbar-light fixed-top bg-light shadow-sm px-3 px-lg-4" data-scroll-header data-fixed-element><a class="navbar-brand d-lg-none" href="typography.html"><img src="../img/logo-dark.png" width="142" alt="Cartzilla"></a>
            <ul class="navbar-nav ms-auto d-none d-lg-flex">
              <li class="nav-item"><a class="nav-link" href="../index.html"><i class="ci-eye align-middle mt-n1 me-2"></i>Live preview</a></li>
              <li class="nav-item">
                <div class="nav-link disabled text-border px-1">|</div>
              </li>
              <li class="nav-item"><a class="nav-link" href="../docs/dev-setup.html"><i class="ci-book align-middle mt-n1 me-2"></i>Documentation</a></li>
              <li class="nav-item">
                <div class="nav-link disabled text-border px-1">|</div>
              </li>
            </ul>
            <button class="navbar-toggler d-block d-lg-none ms-auto" type="button" data-bs-toggle="offcanvas" data-bs-target="#components-nav"><span class="navbar-toggler-icon"></span></button><a class="btn btn-primary btn-shadow ms-2 ms-lg-4" href="https://themes.getbootstrap.com/product/cartzilla-bootstrap-e-commerce-template-ui-kit/" target="_blank" rel="noopener"><i class="ci-cart me-2 d-none d-sm-inline-block"></i>Buy now</a>
          </header>
          <!-- Side navigation-->
          <aside class="offcanvas offcanvas-expand bg-dark" id="components-nav">
            <div class="offcanvas-cap bg-darker d-none d-lg-block"><a class="navbar-brand py-1" href="typography.html"><img src="../img/logo-light.png" width="142" alt="Cartzilla"></a><span class="badge bg-info">Components</span></div>
            <div class="offcanvas-cap bg-darker align-items-center d-flex d-lg-none">
              <div class="d-flex align-items-center">
                <h5 class="text-light mb-0 me-2">Menu</h5><span class="badge bg-info">Components</span>
              </div>
              <button class="btn-close btn-close-white" type="button" data-bs-dismiss="offcanvas" aria-label="Close"></button>
            </div>
            <div class="offcanvas-body" data-simplebar data-simplebar-auto-hide="true">
              <div class="pt-4 pb-3 mt-lg-3">
                <div class="d-flex d-lg-none pb-4 mb-4 border-bottom border-light"><a class="btn btn-outline-light btn-sm me-3" href="../index.html"><i class="ci-eye align-middle mt-n1 me-2"></i>Live demo</a><a class="btn btn-light btn-sm ps-2" href="../docs/dev-setup.html"><i class="ci-book align-middle mt-n1 me-2"></i>Documentation</a></div>
                <div class="widget widget-links widget-light border-bottom border-light mb-4 pb-4 me-n3">
                  <h3 class="widget-title text-white">Content</h3>
                  <ul class="widget-list">
                    <li class="widget-list-item"><a class="widget-list-link" href="typography.html">Typography</a></li>
                    <li class="widget-list-item"><a class="widget-list-link" href="icon-font.html">Icon font</a></li>
                    <li class="widget-list-item"><a class="widget-list-link" href="code.html">Code</a></li>
                    <li class="widget-list-item"><a class="widget-list-link" href="images.html">Images &amp; figures</a></li>
                    <li class="widget-list-item"><a class="widget-list-link" href="tables.html">Tables</a></li>
                  </ul>
                </div>
                <div class="widget widget-links widget-light border-bottom border-light mb-4 pb-4 me-n3">
                  <h3 class="widget-title text-white">Components</h3>
                  <ul class="widget-list">
                    <li class="widget-list-item"><a class="widget-list-link" href="accordion.html">Accordion</a></li>
                    <li class="widget-list-item"><a class="widget-list-link" href="alerts.html">Alerts</a></li>
                    <li class="widget-list-item"><a class="widget-list-link" href="badge.html">Badges</a></li>
                    <li class="widget-list-item"><a class="widget-list-link" href="blog-components.html">Blog components</a></li>
                    <li class="widget-list-item"><a class="widget-list-link" href="breadcrumb.html">Breadcrumb</a></li>
                    <li class="widget-list-item"><a class="widget-list-link" href="buttons.html">Buttons</a></li>
                    <li class="widget-list-item"><a class="widget-list-link" href="button-group.html">Button group</a></li>
                    <li class="widget-list-item"><a class="widget-list-link" href="cards.html">Cards</a></li>
                    <li class="widget-list-item"><a class="widget-list-link" href="carousel.html">Carousel</a></li>
                    <li class="widget-list-item"><a class="widget-list-link" href="charts.html">Charts</a></li>
                    <li class="widget-list-item"><a class="widget-list-link" href="collapse.html">Collapse</a></li>
                    <li class="widget-list-item"><a class="widget-list-link" href="contacts-card.html">Contacts card</a></li>
                    <li class="widget-list-item"><a class="widget-list-link" href="countdown.html">Countdown</a></li>
                    <li class="widget-list-item"><a class="widget-list-link" href="dropdowns.html">Dropdowns</a></li>
                    <li class="widget-list-item"><a class="widget-list-link" href="footer.html">Footer</a></li>
                    <li class="widget-list-item"><a class="widget-list-link" href="forms.html">Forms</a></li>
                    <li class="widget-list-item"><a class="widget-list-link" href="gallery.html">Gallery</a></li>
                    <li class="widget-list-item"><a class="widget-list-link" href="input-group.html">Input group</a></li>
                    <li class="widget-list-item"><a class="widget-list-link" href="list-group.html">List group</a></li>
                    <li class="widget-list-item"><a class="widget-list-link" href="modal.html">Modal</a></li>
                    <li class="widget-list-item"><a class="widget-list-link" href="navbar.html">Navbar</a></li>
                    <li class="widget-list-item"><a class="widget-list-link" href="pagination.html">Pagination</a></li>
                    <li class="widget-list-item"><a class="widget-list-link" href="pills.html">Pills</a></li>
                    <li class="widget-list-item"><a class="widget-list-link" href="popovers.html">Popovers</a></li>
                    <li class="widget-list-item"><a class="widget-list-link" href="progress.html">Progress</a></li>
                    <li class="widget-list-item"><a class="widget-list-link" href="shop-components.html">Shop components</a></li>
                    <li class="widget-list-item"><a class="widget-list-link" href="social-buttons.html">Social buttons</a></li>
                    <li class="widget-list-item"><a class="widget-list-link" href="spinners.html">Spinners</a></li>
                    <li class="widget-list-item"><a class="widget-list-link" href="steps.html">Steps</a></li>
                    <li class="widget-list-item"><a class="widget-list-link" href="tabs.html">Tabs</a></li>
                    <li class="widget-list-item"><a class="widget-list-link" href="team.html">Team</a></li>
                    <li class="widget-list-item"><a class="widget-list-link" href="testimonials.html">Testimonials / reviews</a></li>
                    <li class="widget-list-item"><a class="widget-list-link" href="toasts.html">Toasts</a></li>
                    <li class="widget-list-item"><a class="widget-list-link" href="tooltips.html">Tooltips</a></li>
                    <li class="widget-list-item"><a class="widget-list-link" href="video-button.html">Video button</a></li>
                    <li class="widget-list-item"><a class="widget-list-link" href="widgets.html">Widgets</a></li>
                  </ul>
                </div>
                <div class="widget widget-links widget-light mb-4 pb-2">
                  <h3 class="widget-title text-white">Utilities</h3>
                  <ul class="widget-list">
                    <li class="widget-list-item"><a class="widget-list-link" href="https://getbootstrap.com/docs/5.0/utilities/borders/" target="_blank" rel="noopener">Bootstrap</a></li>
                    <li class="widget-list-item"><a class="widget-list-link" href="utilities.html">Cartzilla</a></li>
                  </ul>
                </div>
              </div>
            </div>
          </aside>
          <!-- Page title-->
          <div class="border-bottom mt-lg-2 pt-5 pb-2 mb-5">
            <h1 class="mt-3 mt-lg-4 pt-5">Widgets</h1>
            <div class="d-flex flex-wrap flex-md-nowrap justify-content-between">
              <p class="text-muted">Collection of tiny components to use inside sidebar area or footer.</p>
              <div class="ps-md-4 mb-3"><span class="badge bg-info">Cartzilla component</span></div>
            </div>
          </div>
          <div class="alert alert-info d-flex mt-n3 mb-5" role="alert">
            <div class="alert-icon"><i class="ci-announcement"></i></div>
            <p class="fs-md text-break mb-0"><strong>Range slider</strong> widget depends on <strong>noUISlider plugin</strong>. Make sure to link to <strong>noUISlider css and js</strong> files in your document: <strong>vendor/nouislider/distribute/nouislider.min.css</strong> and <strong>vendor/nouislider/distribute/nouislider.min.js</strong>. Use this page as a reference.</p>
          </div>
          <!-- Categories-->
          <section class="pb-5 mb-md-2" id="widget-categories">
            <h2 class="h5 mb-3">Categories</h2>
            <div class="card border-0 shadow">
              <div class="card-header">
                <ul class="nav nav-tabs card-header-tabs" role="tablist">
                  <li class="nav-item"><a class="nav-link active" href="#result1" data-bs-toggle="tab" role="tab" aria-controls="result1" aria-selected="true">Result</a></li>
                  <li class="nav-item"><a class="nav-link" href="#html1" data-bs-toggle="tab" role="tab" aria-controls="html1" aria-selected="false">HTML</a></li>
                  <li class="nav-item"><a class="nav-link" href="#pug1" data-bs-toggle="tab" role="tab" aria-controls="pug1" aria-selected="false">Pug</a></li>
                </ul>
              </div>
              <div class="card-body">
                <div class="tab-content">
                  <div class="tab-pane fade show active" id="result1" role="tabpanel">
                    <div class="widget widget-categories" style="max-width: 22rem;">
                      <h3 class="widget-title">Shop categories</h3>
                      <div class="accordion" id="shop-categories">
                        <!-- Clothing-->
                        <div class="accordion-item">
                          <h3 class="accordion-header"><a class="accordion-button" href="#clothing" role="button" data-bs-toggle="collapse" aria-expanded="true" aria-controls="clothing">Clothing</a></h3>
                          <div class="accordion-collapse collapse show" id="clothing" data-bs-parent="#shop-categories">
                            <div class="accordion-body">
                              <div class="widget widget-links widget-filter">
                                <div class="input-group input-group-sm mb-2">
                                  <input class="widget-filter-search form-control rounded-end" type="text" placeholder="Search"><i class="ci-search position-absolute top-50 end-0 translate-middle-y fs-sm me-3"></i>
                                </div>
                                <ul class="widget-list widget-filter-list pt-1" style="height: 12rem;" data-simplebar data-simplebar-auto-hide="false">
                                  <li class="widget-list-item widget-filter-item"><a class="widget-list-link d-flex justify-content-between align-items-center" href="#"><span class="widget-filter-item-text">View all</span><span class="fs-xs text-muted ms-3">2,548</span></a></li>
                                  <li class="widget-list-item widget-filter-item"><a class="widget-list-link d-flex justify-content-between align-items-center" href="#"><span class="widget-filter-item-text">Blazers &amp; Suits</span><span class="fs-xs text-muted ms-3">235</span></a></li>
                                  <li class="widget-list-item widget-filter-item"><a class="widget-list-link d-flex justify-content-between align-items-center" href="#"><span class="widget-filter-item-text">Blouses</span><span class="fs-xs text-muted ms-3">410</span></a></li>
                                  <li class="widget-list-item widget-filter-item"><a class="widget-list-link d-flex justify-content-between align-items-center" href="#"><span class="widget-filter-item-text">Cardigans &amp; Jumpers</span><span class="fs-xs text-muted ms-3">107</span></a></li>
                                  <li class="widget-list-item widget-filter-item"><a class="widget-list-link d-flex justify-content-between align-items-center" href="#"><span class="widget-filter-item-text">Dresses</span><span class="fs-xs text-muted ms-3">93</span></a></li>
                                  <li class="widget-list-item widget-filter-item"><a class="widget-list-link d-flex justify-content-between align-items-center" href="#"><span class="widget-filter-item-text">Hoodie &amp; Sweatshirts</span><span class="fs-xs text-muted ms-3">122</span></a></li>
                                  <li class="widget-list-item widget-filter-item"><a class="widget-list-link d-flex justify-content-between align-items-center" href="#"><span class="widget-filter-item-text">Jackets &amp; Coats</span><span class="fs-xs text-muted ms-3">116</span></a></li>
                                  <li class="widget-list-item widget-filter-item"><a class="widget-list-link d-flex justify-content-between align-items-center" href="#"><span class="widget-filter-item-text">Jeans</span><span class="fs-xs text-muted ms-3">215</span></a></li>
                                  <li class="widget-list-item widget-filter-item"><a class="widget-list-link d-flex justify-content-between align-items-center" href="#"><span class="widget-filter-item-text">Lingerie</span><span class="fs-xs text-muted ms-3">150</span></a></li>
                                  <li class="widget-list-item widget-filter-item"><a class="widget-list-link d-flex justify-content-between align-items-center" href="#"><span class="widget-filter-item-text">Maternity Wear</span><span class="fs-xs text-muted ms-3">8</span></a></li>
                                  <li class="widget-list-item widget-filter-item"><a class="widget-list-link d-flex justify-content-between align-items-center" href="#"><span class="widget-filter-item-text">Nightwear</span><span class="fs-xs text-muted ms-3">26</span></a></li>
                                  <li class="widget-list-item widget-filter-item"><a class="widget-list-link d-flex justify-content-between align-items-center" href="#"><span class="widget-filter-item-text">Shirts</span><span class="fs-xs text-muted ms-3">164</span></a></li>
                                  <li class="widget-list-item widget-filter-item"><a class="widget-list-link d-flex justify-content-between align-items-center" href="#"><span class="widget-filter-item-text">Shorts</span><span class="fs-xs text-muted ms-3">147</span></a></li>
                                  <li class="widget-list-item widget-filter-item"><a class="widget-list-link d-flex justify-content-between align-items-center" href="#"><span class="widget-filter-item-text">Socks &amp; Tights</span><span class="fs-xs text-muted ms-3">139</span></a></li>
                                  <li class="widget-list-item widget-filter-item"><a class="widget-list-link d-flex justify-content-between align-items-center" href="#"><span class="widget-filter-item-text">Sportswear</span><span class="fs-xs text-muted ms-3">65</span></a></li>
                                  <li class="widget-list-item widget-filter-item"><a class="widget-list-link d-flex justify-content-between align-items-center" href="#"><span class="widget-filter-item-text">Swimwear</span><span class="fs-xs text-muted ms-3">18</span></a></li>
                                  <li class="widget-list-item widget-filter-item"><a class="widget-list-link d-flex justify-content-between align-items-center" href="#"><span class="widget-filter-item-text">T-shirts &amp; Vests</span><span class="fs-xs text-muted ms-3">209</span></a></li>
                                  <li class="widget-list-item widget-filter-item"><a class="widget-list-link d-flex justify-content-between align-items-center" href="#"><span class="widget-filter-item-text">Tops</span><span class="fs-xs text-muted ms-3">132</span></a></li>
                                  <li class="widget-list-item widget-filter-item"><a class="widget-list-link d-flex justify-content-between align-items-center" href="#"><span class="widget-filter-item-text">Trousers</span><span class="fs-xs text-muted ms-3">105</span></a></li>
                                  <li class="widget-list-item widget-filter-item"><a class="widget-list-link d-flex justify-content-between align-items-center" href="#"><span class="widget-filter-item-text">Underwear</span><span class="fs-xs text-muted ms-3">87</span></a></li>
                                </ul>
                              </div>
                            </div>
                          </div>
                        </div>
                        <!-- Shoes-->
                        <div class="accordion-item">
                          <h3 class="accordion-header"><a class="accordion-button collapsed" href="#shoes" role="button" data-bs-toggle="collapse" aria-expanded="false" aria-controls="shoes">Shoes</a></h3>
                          <div class="accordion-collapse collapse" id="shoes" data-bs-parent="#shop-categories">
                            <div class="accordion-body">
                              <div class="widget widget-links widget-filter">
                                <div class="input-group input-group-sm mb-2">
                                  <input class="widget-filter-search form-control rounded-end" type="text" placeholder="Search"><i class="ci-search position-absolute top-50 end-0 translate-middle-y fs-sm me-3"></i>
                                </div>
                                <ul class="widget-list widget-filter-list pt-1" style="height: 12rem;" data-simplebar data-simplebar-auto-hide="false">
                                  <li class="widget-list-item widget-filter-item"><a class="widget-list-link d-flex justify-content-between align-items-center" href="#"><span class="widget-filter-item-text">View all</span><span class="fs-xs text-muted ms-3">1,953</span></a></li>
                                  <li class="widget-list-item widget-filter-item"><a class="widget-list-link d-flex justify-content-between align-items-center" href="#"><span class="widget-filter-item-text">Pumps &amp; High Heels</span><span class="fs-xs text-muted ms-3">247</span></a></li>
                                  <li class="widget-list-item widget-filter-item"><a class="widget-list-link d-flex justify-content-between align-items-center" href="#"><span class="widget-filter-item-text">Ballerinas &amp; Flats</span><span class="fs-xs text-muted ms-3">156</span></a></li>
                                  <li class="widget-list-item widget-filter-item"><a class="widget-list-link d-flex justify-content-between align-items-center" href="#"><span class="widget-filter-item-text">Sandals</span><span class="fs-xs text-muted ms-3">310</span></a></li>
                                  <li class="widget-list-item widget-filter-item"><a class="widget-list-link d-flex justify-content-between align-items-center" href="#"><span class="widget-filter-item-text">Sneakers</span><span class="fs-xs text-muted ms-3">402</span></a></li>
                                  <li class="widget-list-item widget-filter-item"><a class="widget-list-link d-flex justify-content-between align-items-center" href="#"><span class="widget-filter-item-text">Boots</span><span class="fs-xs text-muted ms-3">393</span></a></li>
                                  <li class="widget-list-item widget-filter-item"><a class="widget-list-link d-flex justify-content-between align-items-center" href="#"><span class="widget-filter-item-text">Ankle Boots</span><span class="fs-xs text-muted ms-3">50</span></a></li>
                                  <li class="widget-list-item widget-filter-item"><a class="widget-list-link d-flex justify-content-between align-items-center" href="#"><span class="widget-filter-item-text">Loafers</span><span class="fs-xs text-muted ms-3">93</span></a></li>
                                  <li class="widget-list-item widget-filter-item"><a class="widget-list-link d-flex justify-content-between align-items-center" href="#"><span class="widget-filter-item-text">Slip-on</span><span class="fs-xs text-muted ms-3">122</span></a></li>
                                  <li class="widget-list-item widget-filter-item"><a class="widget-list-link d-flex justify-content-between align-items-center" href="#"><span class="widget-filter-item-text">Flip Flops</span><span class="fs-xs text-muted ms-3">116</span></a></li>
                                  <li class="widget-list-item widget-filter-item"><a class="widget-list-link d-flex justify-content-between align-items-center" href="#"><span class="widget-filter-item-text">Clogs &amp; Mules</span><span class="fs-xs text-muted ms-3">24</span></a></li>
                                  <li class="widget-list-item widget-filter-item"><a class="widget-list-link d-flex justify-content-between align-items-center" href="#"><span class="widget-filter-item-text">Athletic Shoes</span><span class="fs-xs text-muted ms-3">31</span></a></li>
                                  <li class="widget-list-item widget-filter-item"><a class="widget-list-link d-flex justify-content-between align-items-center" href="#"><span class="widget-filter-item-text">Oxfords</span><span class="fs-xs text-muted ms-3">9</span></a></li>
                                  <li class="widget-list-item widget-filter-item"><a class="widget-list-link d-flex justify-content-between align-items-center" href="#"><span class="widget-filter-item-text">Smart Shoes</span><span class="fs-xs text-muted ms-3">18</span></a></li>
                                </ul>
                              </div>
                            </div>
                          </div>
                        </div>
                        <!-- Bags-->
                        <div class="accordion-item">
                          <h3 class="accordion-header"><a class="accordion-button collapsed" href="#bags" role="button" data-bs-toggle="collapse" aria-expanded="false" aria-controls="bags">Bags</a></h3>
                          <div class="accordion-collapse collapse" id="bags" data-bs-parent="#shop-categories">
                            <div class="accordion-body">
                              <div class="widget widget-links widget-filter">
                                <div class="input-group input-group-sm mb-2">
                                  <input class="widget-filter-search form-control rounded-end" type="text" placeholder="Search"><i class="ci-search position-absolute top-50 end-0 translate-middle-y fs-sm me-3"></i>
                                </div>
                                <ul class="widget-list widget-filter-list pt-1" style="height: 12rem;" data-simplebar data-simplebar-auto-hide="false">
                                  <li class="widget-list-item widget-filter-item"><a class="widget-list-link d-flex justify-content-between align-items-center" href="#"><span class="widget-filter-item-text">View all</span><span class="fs-xs text-muted ms-3">801</span></a></li>
                                  <li class="widget-list-item widget-filter-item"><a class="widget-list-link d-flex justify-content-between align-items-center" href="#"><span class="widget-filter-item-text">Handbags</span><span class="fs-xs text-muted ms-3">238</span></a></li>
                                  <li class="widget-list-item widget-filter-item"><a class="widget-list-link d-flex justify-content-between align-items-center" href="#"><span class="widget-filter-item-text">Backpacks</span><span class="fs-xs text-muted ms-3">116</span></a></li>
                                  <li class="widget-list-item widget-filter-item"><a class="widget-list-link d-flex justify-content-between align-items-center" href="#"><span class="widget-filter-item-text">Wallets</span><span class="fs-xs text-muted ms-3">104</span></a></li>
                                  <li class="widget-list-item widget-filter-item"><a class="widget-list-link d-flex justify-content-between align-items-center" href="#"><span class="widget-filter-item-text">Luggage</span><span class="fs-xs text-muted ms-3">115</span></a></li>
                                  <li class="widget-list-item widget-filter-item"><a class="widget-list-link d-flex justify-content-between align-items-center" href="#"><span class="widget-filter-item-text">Lumbar Packs</span><span class="fs-xs text-muted ms-3">17</span></a></li>
                                  <li class="widget-list-item widget-filter-item"><a class="widget-list-link d-flex justify-content-between align-items-center" href="#"><span class="widget-filter-item-text">Duffle Bags</span><span class="fs-xs text-muted ms-3">9</span></a></li>
                                  <li class="widget-list-item widget-filter-item"><a class="widget-list-link d-flex justify-content-between align-items-center" href="#"><span class="widget-filter-item-text">Bag / Travel Accessories</span><span class="fs-xs text-muted ms-3">93</span></a></li>
                                  <li class="widget-list-item widget-filter-item"><a class="widget-list-link d-flex justify-content-between align-items-center" href="#"><span class="widget-filter-item-text">Diaper Bags</span><span class="fs-xs text-muted ms-3">5</span></a></li>
                                  <li class="widget-list-item widget-filter-item"><a class="widget-list-link d-flex justify-content-between align-items-center" href="#"><span class="widget-filter-item-text">Lunch Bags</span><span class="fs-xs text-muted ms-3">8</span></a></li>
                                  <li class="widget-list-item widget-filter-item"><a class="widget-list-link d-flex justify-content-between align-items-center" href="#"><span class="widget-filter-item-text">Messenger Bags</span><span class="fs-xs text-muted ms-3">2</span></a></li>
                                  <li class="widget-list-item widget-filter-item"><a class="widget-list-link d-flex justify-content-between align-items-center" href="#"><span class="widget-filter-item-text">Laptop Bags</span><span class="fs-xs text-muted ms-3">31</span></a></li>
                                  <li class="widget-list-item widget-filter-item"><a class="widget-list-link d-flex justify-content-between align-items-center" href="#"><span class="widget-filter-item-text">Briefcases</span><span class="fs-xs text-muted ms-3">45</span></a></li>
                                  <li class="widget-list-item widget-filter-item"><a class="widget-list-link d-flex justify-content-between align-items-center" href="#"><span class="widget-filter-item-text">Sport Bags</span><span class="fs-xs text-muted ms-3">18</span></a></li>
                                </ul>
                              </div>
                            </div>
                          </div>
                        </div>
                        <!-- Sunglasses-->
                        <div class="accordion-item">
                          <h3 class="accordion-header"><a class="accordion-button collapsed" href="#sunglasses" role="button" data-bs-toggle="collapse" aria-expanded="false" aria-controls="sunglasses">Sunglasses</a></h3>
                          <div class="accordion-collapse collapse" id="sunglasses" data-bs-parent="#shop-categories">
                            <div class="accordion-body">
                              <div class="widget widget-links">
                                <ul class="widget-list">
                                  <li class="widget-list-item"><a class="widget-list-link d-flex justify-content-between align-items-center" href="#"><span>View all</span><span class="fs-xs text-muted ms-3">1,842</span></a></li>
                                  <li class="widget-list-item"><a class="widget-list-link d-flex justify-content-between align-items-center" href="#"><span>Fashion Sunglasses</span><span class="fs-xs text-muted ms-3">953</span></a></li>
                                  <li class="widget-list-item"><a class="widget-list-link d-flex justify-content-between align-items-center" href="#"><span>Sport Sunglasses</span><span class="fs-xs text-muted ms-3">589</span></a></li>
                                  <li class="widget-list-item"><a class="widget-list-link d-flex justify-content-between align-items-center" href="#"><span>Classic Sunglasses</span><span class="fs-xs text-muted ms-3">300</span></a></li>
                                </ul>
                              </div>
                            </div>
                          </div>
                        </div>
                        <!-- Watches-->
                        <div class="accordion-item">
                          <h3 class="accordion-header"><a class="accordion-button collapsed" href="#watches" role="button" data-bs-toggle="collapse" aria-expanded="false" aria-controls="watches">Watches</a></h3>
                          <div class="accordion-collapse collapse" id="watches" data-bs-parent="#shop-categories">
                            <div class="accordion-body">
                              <div class="widget widget-links">
                                <ul class="widget-list">
                                  <li class="widget-list-item"><a class="widget-list-link d-flex justify-content-between align-items-center" href="#"><span>View all</span><span class="fs-xs text-muted ms-3">734</span></a></li>
                                  <li class="widget-list-item"><a class="widget-list-link d-flex justify-content-between align-items-center" href="#"><span>Fashion Watches</span><span class="fs-xs text-muted ms-3">572</span></a></li>
                                  <li class="widget-list-item"><a class="widget-list-link d-flex justify-content-between align-items-center" href="#"><span>Casual Watches</span><span class="fs-xs text-muted ms-3">110</span></a></li>
                                  <li class="widget-list-item"><a class="widget-list-link d-flex justify-content-between align-items-center" href="#"><span>Luxury Watches</span><span class="fs-xs text-muted ms-3">34</span></a></li>
                                  <li class="widget-list-item"><a class="widget-list-link d-flex justify-content-between align-items-center" href="#"><span>Sport Watches</span><span class="fs-xs text-muted ms-3">18</span></a></li>
                                </ul>
                              </div>
                            </div>
                          </div>
                        </div>
                        <!-- Accessories-->
                        <div class="accordion-item">
                          <div class="accordion-header"><a class="accordion-button collapsed" href="#accessories" role="button" data-bs-toggle="collapse" aria-expanded="false" aria-controls="accessories">Accessories</a></div>
                          <div class="accordion-collapse collapse" id="accessories" data-bs-parent="#shop-categories">
                            <div class="accordion-body">
                              <div class="widget widget-links">
                                <ul class="widget-list">
                                  <li class="widget-list-item"><a class="widget-list-link d-flex justify-content-between align-items-center" href="#"><span>View all</span><span class="fs-xs text-muted ms-3">920</span></a></li>
                                  <li class="widget-list-item"><a class="widget-list-link d-flex justify-content-between align-items-center" href="#"><span>Belts</span><span class="fs-xs text-muted ms-3">364</span></a></li>
                                  <li class="widget-list-item"><a class="widget-list-link d-flex justify-content-between align-items-center" href="#"><span>Hats</span><span class="fs-xs text-muted ms-3">405</span></a></li>
                                  <li class="widget-list-item"><a class="widget-list-link d-flex justify-content-between align-items-center" href="#"><span>Jewelry</span><span class="fs-xs text-muted ms-3">131</span></a></li>
                                  <li class="widget-list-item"><a class="widget-list-link d-flex justify-content-between align-items-center" href="#"><span>Cosmetics</span><span class="fs-xs text-muted ms-3">20</span></a></li>
                                </ul>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="tab-pane fade" id="html1" role="tabpanel">
                    <pre class="line-numbers"><code class="lang-html">&lt;!-- Widget: Categories --&gt;
&lt;div class=&quot;widget widget-categories&quot;&gt;
  &lt;h3 class=&quot;widget-title&quot;&gt;Shop categories&lt;/h3&gt;
  &lt;div id=&quot;shop-categories&quot; class=&quot;accordion&quot;&gt;

    &lt;!-- Category with search bar and scrollbar (more items) --&gt;
    &lt;div class=&quot;accordion-item&quot;&gt;
      &lt;h3 class=&quot;accordion-header&quot;&gt;
        &lt;a href=&quot;#clothing&quot; class=&quot;accordion-button&quot; role=&quot;button&quot; data-bs-toggle=&quot;collapse&quot; aria-expanded=&quot;true&quot; aria-controls=&quot;clothing&quot;&gt;
          Clothing
        &lt;/a&gt;
      &lt;/h3&gt;
      &lt;div id=&quot;clothing&quot; class=&quot;accordion-collapse collapse show&quot; data-bs-parent=&quot;#shop-categories&quot;&gt;
        &lt;div class=&quot;accordion-body&quot;&gt;
          &lt;div class=&quot;widget widget-links widget-filter&quot;&gt;

            &lt;!-- Search --&gt;
            &lt;div class=&quot;input-group input-group-sm mb-2&quot;&gt;
              &lt;input type=&quot;text&quot; class=&quot;widget-filter-search form-control rounded-end&quot; placeholder=&quot;Search&quot;&gt;
              &lt;i class=&quot;ci-search position-absolute top-50 end-0 translate-middle-y fs-sm me-3&quot;&gt;&lt;/i&gt;
            &lt;/div&gt;

            &lt;!-- Sub-categories --&gt;
            &lt;ul class=&quot;widget-list widget-filter-list pt-1&quot; style=&quot;height: 12rem;&quot; data-simplebar data-simplebar-auto-hide=&quot;false&quot;&gt;
              &lt;li class=&quot;widget-list-item widget-filter-item&quot;&gt;
                &lt;a href=&quot;#&quot; class=&quot;widget-list-link d-flex justify-content-between align-items-center&quot;&gt;
                  &lt;span class=&quot;widget-filter-item-text&quot;&gt;View all&lt;/span&gt;
                  &lt;span class=&quot;fs-xs text-muted ms-3&quot;&gt;2,548&lt;/span&gt;
                &lt;/a&gt;
              &lt;/li&gt;
              &lt;li class=&quot;widget-list-item widget-filter-item&quot;&gt;
                &lt;a href=&quot;#&quot; class=&quot;widget-list-link d-flex justify-content-between align-items-center&quot;&gt;
                  &lt;span class=&quot;widget-filter-item-text&quot;&gt;Blazers &amp;amp; Suits&lt;/span&gt;
                  &lt;span class=&quot;fs-xs text-muted ms-3&quot;&gt;235&lt;/span&gt;
                &lt;/a&gt;
              &lt;/li&gt;
              &lt;li class=&quot;widget-list-item widget-filter-item&quot;&gt;
                &lt;a href=&quot;#&quot; class=&quot;widget-list-link d-flex justify-content-between align-items-center&quot;&gt;
                  &lt;span class=&quot;widget-filter-item-text&quot;&gt;Blouses&lt;/span&gt;
                  &lt;span class=&quot;fs-xs text-muted ms-3&quot;&gt;410&lt;/span&gt;
                &lt;/a&gt;
              &lt;/li&gt;
              ...
            &lt;/ul&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;

    &lt;!-- Category without search bar and scrollbar (less items) --&gt;
    &lt;div class=&quot;accordion-item&quot;&gt;
      &lt;h3 class=&quot;accordion-header&quot;&gt;
        &lt;a href=&quot;#sunglasses&quot; class=&quot;accordion-button collapsed&quot; role=&quot;button&quot; data-bs-toggle=&quot;collapse&quot; aria-expanded=&quot;false&quot; aria-controls=&quot;sunglasses&quot;&gt;
          Sunglasses
        &lt;/a&gt;
      &lt;/h3&gt;
      &lt;div id=&quot;sunglasses&quot; class=&quot;accordion-collapse collapse&quot; data-bs-parent=&quot;#shop-categories&quot;&gt;
        &lt;div class=&quot;accordion-body&quot;&gt;

          &lt;!-- Sub-categories --&gt;
          &lt;div class=&quot;widget widget-links&quot;&gt;
            &lt;ul class=&quot;widget-list&quot;&gt;
              &lt;li class=&quot;widget-list-item&quot;&gt;
                &lt;a href=&quot;#&quot; class=&quot;widget-list-link d-flex justify-content-between align-items-center&quot;&gt;
                  &lt;span&gt;View all&lt;/span&gt;
                  &lt;span class=&quot;fs-xs text-muted ms-3&quot;&gt;1,842&lt;/span&gt;
                &lt;/a&gt;
              &lt;/li&gt;
              &lt;li class=&quot;widget-list-item&quot;&gt;
                &lt;a href=&quot;#&quot; class=&quot;widget-list-link d-flex justify-content-between align-items-center&quot;&gt;
                  &lt;span&gt;Fashion Sunglasses&lt;/span&gt;
                  &lt;span class=&quot;fs-xs text-muted ms-3&quot;&gt;953&lt;/span&gt;
                &lt;/a&gt;
              &lt;/li&gt;
              &lt;li class=&quot;widget-list-item&quot;&gt;
                &lt;a href=&quot;#&quot; class=&quot;widget-list-link d-flex justify-content-between align-items-center&quot;&gt;
                  &lt;span&gt;Sport Sunglasses&lt;/span&gt;
                  &lt;span class=&quot;fs-xs text-muted ms-3&quot;&gt;589&lt;/span&gt;
                &lt;/a&gt;
              &lt;/li&gt;
              ...
            &lt;/ul&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;

    &lt;!-- Add as many categories and sub-categories as you need --&gt;
  &lt;/div&gt;
&lt;/div&gt;</code></pre>
                  </div>
                  <div class="tab-pane fade" id="pug1" role="tabpanel">
                    <pre class="line-numbers"><code class="lang-pug">// Widget: Categories
.widget.widget-categories
  h3.widget-title Shop categories
  #shop-categories.accordion

    // Category with search bar and scrollbar (more items)
    .accordion
      h3.accordion-header
        a(href=&quot;#clothing&quot;, role=&quot;button&quot;, data-bs-toggle=&quot;collapse&quot;, aria-expanded=&quot;true&quot;, aria-controls=&quot;clothing&quot;).accordion-button
          | Clothing
      #clothing.accordion-collapse.collapse.show(data-bs-parent=&quot;#shop-categories&quot;)
        .accordion-body
          .widget.widget-links.widget-filter
          
            // Search
            .input-group.input-group-sm.mb-2
              input(type=&quot;text&quot;, placeholder=&quot;Search&quot;).widget-filter-search.form-control.rounded-end
              i.ci-search.position-absolute.top-50.end-0.translate-middle-y.fs-sm.me-3

            // Sub-categories
            ul(style=&quot;height: 12rem;&quot;, data-simplebar, data-simplebar-auto-hide=&quot;false&quot;).widget-list.widget-filter-list.pt-1
              li.widget-list-item.widget-filter-item
                a(href=&quot;#&quot;).widget-list-link.d-flex.justify-content-between.align-items-center
                  span.widget-filter-item-text View all
                  span.fs-xs.text-muted.ms-3 2,548
              li.widget-list-item.widget-filter-item
                a(href=&quot;#&quot;).widget-list-link.d-flex.justify-content-between.align-items-center
                  span.widget-filter-item-text Blazers &amp;amp; Suits
                  span.fs-xs.text-muted.ms-3 235
              li.widget-list-item.widget-filter-item
                a(href=&quot;#&quot;).widget-list-link.d-flex.justify-content-between.align-items-center
                  span.widget-filter-item-text Blouses
                  span.fs-xs.text-muted.ms-3 410
              ...

    // Category without search bar and scrollbar (less items)
    .accordion
      h3.accordion-header
        a(href=&quot;#sunglasses&quot; role=&quot;button&quot; data-bs-toggle=&quot;collapse&quot; aria-expanded=&quot;false&quot; aria-controls=&quot;sunglasses&quot;).accordion-button.collapsed
          | Sunglasses
      #sunglasses.accordion-collapse.collapse(data-bs-parent=&quot;#shop-categories&quot;)
        .accordion-body

          // Sub-categories
          .widget.widget-links
            ul.widget-list
              li.widget-list-item
                a(href=&quot;#&quot;).widget-list-link.d-flex.justify-content-between.align-items-center
                  span View all
                  span.fs-xs.text-muted.ms-3 1,842
              li.widget-list-item
                a(href=&quot;#&quot;).widget-list-link.d-flex.justify-content-between.align-items-center
                  span Fashion Sunglasses
                  span.fs-xs.text-muted.ms-3 953
              li.widget-list-item
                a(href=&quot;#&quot;).widget-list-link.d-flex.justify-content-between.align-items-center
                  span Sport Sunglasses
                  span.fs-xs.text-muted.ms-3 589
              li.widget-list-item
                a(href=&quot;#&quot;).widget-list-link.d-flex.justify-content-between.align-items-center
                  span Classic Sunglasses
                  span.fs-xs.text-muted.ms-3 300
    
    // Add as many categories and sub-categories as you need
</code></pre>
                  </div>
                </div>
              </div>
            </div>
          </section>
          <!-- Price range-->
          <section class="pb-5 mb-md-2" id="widget-range">
            <h2 class="h5 mb-3">Price range</h2>
            <div class="card border-0 shadow">
              <div class="card-header">
                <ul class="nav nav-tabs card-header-tabs" role="tablist">
                  <li class="nav-item"><a class="nav-link active" href="#result2" data-bs-toggle="tab" role="tab" aria-controls="result2" aria-selected="true">Result</a></li>
                  <li class="nav-item"><a class="nav-link" href="#html2" data-bs-toggle="tab" role="tab" aria-controls="html2" aria-selected="false">HTML</a></li>
                  <li class="nav-item"><a class="nav-link" href="#pug2" data-bs-toggle="tab" role="tab" aria-controls="pug2" aria-selected="false">Pug</a></li>
                </ul>
              </div>
              <div class="card-body">
                <div class="tab-content">
                  <div class="tab-pane fade show active" id="result2" role="tabpanel">
                    <div class="widget" style="max-width: 20rem;">
                      <h3 class="widget-title">Price range</h3>
                      <div class="range-slider" data-start-min="250" data-start-max="680" data-min="0" data-max="1000" data-step="1">
                        <div class="range-slider-ui"></div>
                        <div class="d-flex">
                          <div class="w-50 pe-2 me-2">
                            <div class="input-group input-group-sm"><span class="input-group-text">$</span>
                              <input class="form-control range-slider-value-min" type="text">
                            </div>
                          </div>
                          <div class="w-50 ps-2">
                            <div class="input-group input-group-sm"><span class="input-group-text">$</span>
                              <input class="form-control range-slider-value-max" type="text">
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="tab-pane fade" id="html2" role="tabpanel">
                    <pre class="line-numbers"><code class="lang-html">&lt;!-- Widget: Range slider
        Data API:
        data-start-min - position of the slider's left handle
        data-start-max - position of the slider's right handle
        data-min - range minimum
        data-max - range maximum
        data-step - range step
--&gt;
&lt;div class=&quot;widget&quot;&gt;
  &lt;h3 class=&quot;widget-title&quot;&gt;Price range&lt;/h3&gt;
  &lt;div class=&quot;range-slider&quot; data-start-min=&quot;250&quot; data-start-max=&quot;680&quot; data-min=&quot;0&quot; data-max=&quot;1000&quot; data-step=&quot;1&quot;&gt;
    &lt;div class=&quot;range-slider-ui&quot;&gt;&lt;/div&gt;
    &lt;div class=&quot;d-flex&quot;&gt;
      &lt;div class=&quot;w-50 pe-2 me-2&quot;&gt;
        &lt;div class=&quot;input-group input-group-sm&quot;&gt;
          &lt;span class=&quot;input-group-text&quot;&gt;$&lt;/span&gt;
          &lt;input class=&quot;form-control range-slider-value-min&quot; type=&quot;text&quot;&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class=&quot;w-50 ps-2&quot;&gt;
        &lt;div class=&quot;input-group input-group-sm&quot;&gt;
          &lt;span class=&quot;input-group-text&quot;&gt;$&lt;/span&gt;
          &lt;input class=&quot;form-control range-slider-value-max&quot; type=&quot;text&quot;&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;</code></pre>
                  </div>
                  <div class="tab-pane fade" id="pug2" role="tabpanel">
                    <pre class="line-numbers"><code class="lang-pug">// Widget: Range slider
// Data API:
// data-start-min - position of the slider's left handle
// data-start-max - position of the slider's right handle
// data-min - range minimum
// data-max - range maximum
// data-step - range step
.widget
  h3.widget-title Price range
  .range-slider(data-start-min=&quot;250&quot;, data-start-max=&quot;680&quot;, data-min=&quot;0&quot;, data-max=&quot;1000&quot;, data-step=&quot;1&quot;)
    .range-slider-ui
    .d-flex
      .w-50.pe-2.me-2
        .input-group.input-group-sm
          span.input-group-text $
          input(type=&quot;text&quot;).form-control.range-slider-value-min
      .w-50.ps-2
        .input-group.input-group-sm
          span.input-group-text $
          input(type=&quot;text&quot;).form-control.range-slider-value-max
</code></pre>
                  </div>
                </div>
              </div>
            </div>
          </section>
          <!-- Links-->
          <section class="pb-5 mb-md-2" id="widget-links">
            <h2 class="h5 mb-3">Links</h2>
            <div class="card border-0 shadow">
              <div class="card-header">
                <ul class="nav nav-tabs card-header-tabs" role="tablist">
                  <li class="nav-item"><a class="nav-link active" href="#result3" data-bs-toggle="tab" role="tab" aria-controls="result3" aria-selected="true">Result</a></li>
                  <li class="nav-item"><a class="nav-link" href="#html3" data-bs-toggle="tab" role="tab" aria-controls="html3" aria-selected="false">HTML</a></li>
                  <li class="nav-item"><a class="nav-link" href="#pug3" data-bs-toggle="tab" role="tab" aria-controls="pug3" aria-selected="false">Pug</a></li>
                </ul>
              </div>
              <div class="card-body">
                <div class="tab-content">
                  <div class="tab-pane fade show active" id="result3" role="tabpanel">
                    <div class="widget widget-links">
                      <h3 class="widget-title">Useful links</h3>
                      <ul class="widget-list">
                        <li class="widget-list-item"><a class="widget-list-link" href="#">Your account</a></li>
                        <li class="widget-list-item"><a class="widget-list-link" href="#">Shipping rates &amp; policies</a></li>
                        <li class="widget-list-item"><a class="widget-list-link" href="#">Refunds &amp; replacements</a></li>
                        <li class="widget-list-item"><a class="widget-list-link" href="#">Taxes</a></li>
                        <li class="widget-list-item"><a class="widget-list-link" href="#">Delivery info</a></li>
                        <li class="widget-list-item"><a class="widget-list-link" href="#">Affiliate program</a></li>
                      </ul>
                    </div>
                  </div>
                  <div class="tab-pane fade" id="html3" role="tabpanel">
                    <pre class="line-numbers"><code class="lang-html">&lt;!-- Widget: Links --&gt;
&lt;div class=&quot;widget widget-links&quot;&gt;
  &lt;h3 class=&quot;widget-title&quot;&gt;Useful links&lt;/h3&gt;
  &lt;ul class=&quot;widget-list&quot;&gt;
    &lt;li class=&quot;widget-list-item&quot;&gt;
      &lt;a href=&quot;#&quot; class=&quot;widget-list-link&quot;&gt;Your account&lt;/a&gt;
    &lt;/li&gt;
    &lt;li class=&quot;widget-list-item&quot;&gt;
      &lt;a href=&quot;#&quot; class=&quot;widget-list-link&quot;&gt;Shipping rates &amp;amp; policies&lt;/a&gt;
    &lt;/li&gt;
    &lt;li class=&quot;widget-list-item&quot;&gt;
      &lt;a href=&quot;#&quot; class=&quot;widget-list-link&quot;&gt;Refunds &amp;amp; replacements&lt;/a&gt;
    &lt;/li&gt;
    &lt;li class=&quot;widget-list-item&quot;&gt;
      &lt;a href=&quot;#&quot; class=&quot;widget-list-link&quot;&gt;Taxes&lt;/a&gt;
    &lt;/li&gt;
    &lt;li class=&quot;widget-list-item&quot;&gt;
      &lt;a href=&quot;#&quot; class=&quot;widget-list-link&quot;&gt;Delivery info&lt;/a&gt;
    &lt;/li&gt;
    &lt;li class=&quot;widget-list-item&quot;&gt;
      &lt;a href=&quot;#&quot; class=&quot;widget-list-link&quot;&gt;Affiliate program&lt;/a&gt;
    &lt;/li&gt;
  &lt;/ul&gt;
&lt;/div&gt;</code></pre>
                  </div>
                  <div class="tab-pane fade" id="pug3" role="tabpanel">
                    <pre class="line-numbers"><code class="lang-pug">// Widget: Links
.widget.widget-links
  h3.widget-title Useful links
  ul.widget-list
    li.widget-list-item
      a.widget-list-link(href=&quot;#&quot;) Your account
    li.widget-list-item
      a.widget-list-link(href=&quot;#&quot;) Shipping rates &amp;amp; policies
    li.widget-list-item
      a.widget-list-link(href=&quot;#&quot;) Refunds &amp;amp; replacements
    li.widget-list-item
      a.widget-list-link(href=&quot;#&quot;) Taxes
    li.widget-list-item
      a.widget-list-link(href=&quot;#&quot;) Delivery info
    li.widget-list-item
      a.widget-list-link(href=&quot;#&quot;) Affiliate program
</code></pre>
                  </div>
                </div>
              </div>
            </div>
          </section>
          <!-- Featured products list-->
          <section class="pb-5 mb-md-2" id="widget-products-list">
            <h2 class="h5 mb-3">Featured products list</h2>
            <div class="card border-0 shadow">
              <div class="card-header">
                <ul class="nav nav-tabs card-header-tabs" role="tablist">
                  <li class="nav-item"><a class="nav-link active" href="#result4" data-bs-toggle="tab" role="tab" aria-controls="result4" aria-selected="true">Result</a></li>
                  <li class="nav-item"><a class="nav-link" href="#html4" data-bs-toggle="tab" role="tab" aria-controls="html4" aria-selected="false">HTML</a></li>
                  <li class="nav-item"><a class="nav-link" href="#pug4" data-bs-toggle="tab" role="tab" aria-controls="pug4" aria-selected="false">Pug</a></li>
                </ul>
              </div>
              <div class="card-body">
                <div class="tab-content">
                  <div class="tab-pane fade show active" id="result4" role="tabpanel">
                    <div class="widget" style="max-width: 22rem;">
                      <h3 class="widget-title">Featured products</h3>
                      <div class="d-flex align-items-center pb-2 border-bottom"><a class="flex-shrink-0" href="#"><img src="../img/shop/cart/widget/01.jpg" width="64" alt="Product"></a>
                        <div class="ps-2">
                          <h6 class="widget-product-title"><a href="#">Women Colorblock Sneakers</a></h6>
                          <div class="widget-product-meta"><span class="text-accent me-2">$150.<small>00</small></span></div>
                        </div>
                      </div>
                      <div class="d-flex align-items-center py-2 border-bottom"><a class="flex-shrink-0" href="#"><img src="../img/shop/cart/widget/02.jpg" width="64" alt="Product"></a>
                        <div class="ps-2">
                          <h6 class="widget-product-title"><a href="#">TH Jeans City Backpack</a></h6>
                          <div class="widget-product-meta"><span class="text-accent me-2">$79.<small>50</small></span></div>
                        </div>
                      </div>
                      <div class="d-flex align-items-center py-2 border-bottom"><a class="flex-shrink-0" href="#"><img src="../img/shop/cart/widget/03.jpg" width="64" alt="Product"></a>
                        <div class="ps-2">
                          <h6 class="widget-product-title"><a href="#">3-Color Sun Stash Hat</a></h6>
                          <div class="widget-product-meta"><span class="text-accent me-2">$22.<small>50</small></span></div>
                        </div>
                      </div>
                      <div class="d-flex align-items-center py-2"><a class="flex-shrink-0" href="#"><img src="../img/shop/cart/widget/04.jpg" width="64" alt="Product"></a>
                        <div class="ps-2">
                          <h6 class="widget-product-title"><a href="#">Cotton Polo Regular Fit</a></h6>
                          <div class="widget-product-meta"><span class="text-accent me-2">$9.<small>00</small></span></div>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="tab-pane fade" id="html4" role="tabpanel">
                    <pre class="line-numbers"><code class="lang-html">&lt;!-- Widget: Featured products list --&gt;
&lt;div class=&quot;widget&quot;&gt;
  &lt;h3 class=&quot;widget-title&quot;&gt;Featured products&lt;/h3&gt;

  &lt;!-- Item --&gt;
  &lt;div class=&quot;d-flex align-items-center pb-2 border-bottom&quot;&gt;
    &lt;a class=&quot;flex-shrink-0&quot; href=&quot;#&quot;&gt;
      &lt;img src=&quot;path-to-image&quot; width=&quot;64&quot; alt=&quot;Product&quot;/&gt;
    &lt;/a&gt;
    &lt;div class=&quot;ps-2&quot;&gt;
      &lt;h6 class=&quot;widget-product-title&quot;&gt;&lt;a href=&quot;#&quot;&gt;Women Colorblock Sneakers&lt;/a&gt;&lt;/h6&gt;
      &lt;div class=&quot;widget-product-meta&quot;&gt;
        &lt;span class=&quot;text-accent me-2&quot;&gt;$150.&lt;small&gt;00&lt;/small&gt;&lt;/span&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;

  &lt;!-- Item --&gt;
  &lt;div class=&quot;d-flex align-items-center py-2 border-bottom&quot;&gt;
    &lt;a class=&quot;flex-shrink-0&quot; href=&quot;#&quot;&gt;
      &lt;img src=&quot;path-to-image&quot; width=&quot;64&quot; alt=&quot;Product&quot;/&gt;
    &lt;/a&gt;
    &lt;div class=&quot;ps-2&quot;&gt;
      &lt;6 class=&quot;widget-product-title&quot;&gt;&lt;a href=&quot;#&quot;&gt;TH Jeans City Backpack&lt;/a&gt;&lt;/h6&gt;
      &lt;div class=&quot;widget-product-meta&quot;&gt;
        &lt;span class=&quot;text-accent me-2&quot;&gt;$79.&lt;small&gt;00&lt;/small&gt;&lt;/span&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;

  &lt;!-- Item --&gt;
  &lt;div class=&quot;d-flex align-items-center py-2 border-bottom&quot;&gt;
    &lt;a class=&quot;flex-shrink-0&quot; href=&quot;#&quot;&gt;
      &lt;img src=&quot;path-to-image&quot; width=&quot;64&quot; alt=&quot;Product&quot;/&gt;
    &lt;/a&gt;
    &lt;div class=&quot;ps-2y&quot;&gt;
      &lt;h6 class=&quot;widget-product-title&quot;&gt;&lt;a href=&quot;#&quot;&gt;3-Color Sun Stash Hat&lt;/a&gt;&lt;/h6&gt;
      &lt;div class=&quot;widget-product-meta&quot;&gt;
        &lt;span class=&quot;text-accent me-2&quot;&gt;$22.&lt;small&gt;00&lt;/small&gt;&lt;/span&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;

  &lt;!-- Item --&gt;
  &lt;div class=&quot;d-flex align-items-center py-2&quot;&gt;
    &lt;a class=&quot;flex-shrink-0&quot; href=&quot;#&quot;&gt;
      &lt;img src=&quot;path-to-image&quot; width=&quot;64&quot; alt=&quot;Product&quot;/&gt;
    &lt;/a&gt;
    &lt;div class=&quot;ps-2&quot;&gt;
      &lt;h6 class=&quot;widget-product-title&quot;&gt;&lt;a href=&quot;#&quot;&gt;Cotton Polo Regular Fit&lt;/a&gt;&lt;/h6&gt;
      &lt;div class=&quot;widget-product-meta&quot;&gt;
        &lt;span class=&quot;text-accent me-2&quot;&gt;$9.&lt;small&gt;00&lt;/small&gt;&lt;/span&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;</code></pre>
                  </div>
                  <div class="tab-pane fade" id="pug4" role="tabpanel">
                    <pre class="line-numbers"><code class="lang-pug">// Widget: Featured products list
.widget
  h3.widget-title Featured products
  
  // Item
  .d-flex.align-items-center.pb-2.border-bottom
    a(href=&quot;#&quot;).flex-shrink-0
      img(src=&quot;path-to-image&quot;, width=&quot;64&quot;, alt=&quot;Product&quot;)
    .ps-2
      h6.widget-product-title
        a(href=&quot;#&quot;) Women Colorblock Sneakers
      .widget-product-meta
        span.text-accent.me-2
          | $150.
          small 00
  
  // Item
  .d-flex.align-items-center.py-2.border-bottom
    a(href=&quot;#&quot;).flex-shrink-0
      img(src=&quot;path-to-image&quot;, width=&quot;64&quot;, alt=&quot;Product&quot;)
    .ps-2
      h6.widget-product-title
        a(href=&quot;#&quot;) TH Jeans City Backpack
      .widget-product-meta
        span.text-accent.me-2
          | $79.
          small 50
  
  // Item
  .d-flex.align-items-center.py-2.border-bottom
    a(href=&quot;#&quot;).flex-shrink-0
      img(src=&quot;path-to-image&quot;, width=&quot;64&quot;, alt=&quot;Product&quot;)
    .ps-2
      h6.widget-product-title
        a(href=&quot;#&quot;) 3-Color Sun Stash Hat
      .widget-product-meta
        span.text-accent.me-2
          | $22.
          small 50

  // Item
  .d-flex.align-items-center.py-2
    a(href=&quot;#&quot;).flex-shrink-0
      img(src=&quot;path-to-image&quot;, width=&quot;64&quot;, alt=&quot;Product&quot;)
    .ps-2
      h6.widget-product-title
        a(href=&quot;#&quot;) Cotton Polo Regular Fit
      .widget-product-meta
        span.text-accent.me-2
          | $9.
          small 00
</code></pre>
                  </div>
                </div>
              </div>
            </div>
          </section>
          <!-- Featured products carousel-->
          <section class="pb-5 mb-md-2" id="widget-products-carousel">
            <h2 class="h5 mb-3">Featured products carousel</h2>
            <div class="card border-0 shadow">
              <div class="card-header">
                <ul class="nav nav-tabs card-header-tabs" role="tablist">
                  <li class="nav-item"><a class="nav-link active" href="#result5" data-bs-toggle="tab" role="tab" aria-controls="result5" aria-selected="true">Result</a></li>
                  <li class="nav-item"><a class="nav-link" href="#html5" data-bs-toggle="tab" role="tab" aria-controls="html5" aria-selected="false">HTML</a></li>
                  <li class="nav-item"><a class="nav-link" href="#pug5" data-bs-toggle="tab" role="tab" aria-controls="pug5" aria-selected="false">Pug</a></li>
                </ul>
              </div>
              <div class="card-body">
                <div class="tab-content">
                  <div class="tab-pane fade show active" id="result5" role="tabpanel">
                    <div class="widget" style="max-width: 22rem;">
                      <h3 class="widget-title">Featured products</h3>
                      <div class="tns-carousel tns-nav-start">
                        <div class="tns-carousel-inner" data-carousel-options="{&quot;controls&quot;: false}">
                          <div>
                            <div class="d-flex align-items-center"><a class="flex-shrink-0" href="#"><img src="../img/shop/cart/widget/01.jpg" width="64" alt="Product"></a>
                              <div class="ps-2">
                                <h6 class="widget-product-title"><a href="#">Women Colorblock Sneakers</a></h6>
                                <div class="widget-product-meta"><span class="text-accent me-2">$150.<small>00</small></span></div>
                              </div>
                            </div>
                          </div>
                          <div>
                            <div class="d-flex align-items-center"><a class="flex-shrink-0" href="#"><img src="../img/shop/cart/widget/02.jpg" width="64" alt="Product"></a>
                              <div class="ps-2">
                                <h6 class="widget-product-title"><a href="#">TH Jeans City Backpack</a></h6>
                                <div class="widget-product-meta"><span class="text-accent me-2">$79.<small>50</small></span></div>
                              </div>
                            </div>
                          </div>
                          <div>
                            <div class="d-flex align-items-center"><a class="flex-shrink-0" href="#"><img src="../img/shop/cart/widget/03.jpg" width="64" alt="Product"></a>
                              <div class="ps-2">
                                <h6 class="widget-product-title"><a href="#">3-Color Sun Stash Hat</a></h6>
                                <div class="widget-product-meta"><span class="text-accent me-2">$22.<small>50</small></span></div>
                              </div>
                            </div>
                          </div>
                          <div>
                            <div class="d-flex align-items-center"><a class="flex-shrink-0" href="#"><img src="../img/shop/cart/widget/04.jpg" width="64" alt="Product"></a>
                              <div class="ps-2">
                                <h6 class="widget-product-title"><a href="#">Cotton Polo Regular Fit</a></h6>
                                <div class="widget-product-meta"><span class="text-accent me-2">$9.<small>00</small></span></div>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="tab-pane fade" id="html5" role="tabpanel">
                    <pre class="line-numbers"><code class="lang-html">&lt;!-- Widget: Featured products carousel --&gt;
&lt;div class=&quot;widget&quot;&gt;
  &lt;h3 class=&quot;widget-title&quot;&gt;Featured products&lt;/h3&gt;
  &lt;div class=&quot;tns-carousel tns-nav-start&quot;&gt;
    &lt;div class=&quot;tns-carousel-inner&quot; data-carousel-options='{&quot;controls&quot;: false}'&gt;

      &lt;!-- Item --&gt;
      &lt;div&gt;
        &lt;div class=&quot;d-flex align-items-center&quot;&gt;
          &lt;a class=&quot;flex-shrink-0&quot; href=&quot;#&quot;&gt;
            &lt;img src=&quot;path-to-image&quot; width=&quot;64&quot; alt=&quot;Product&quot;/&gt;
          &lt;/a&gt;
          &lt;div class=&quot;ps-2&quot;&gt;
            &lt;h6 class=&quot;widget-product-title&quot;&gt;&lt;a href=&quot;#&quot;&gt;Women Colorblock Sneakers&lt;/a&gt;&lt;/h6&gt;
            &lt;div class=&quot;widget-product-meta&quot;&gt;
              &lt;span class=&quot;text-accent me-2&quot;&gt;$150.&lt;small&gt;00&lt;/small&gt;&lt;/span&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;

      &lt;!-- Item --&gt;
      &lt;div&gt;
        &lt;div class=&quot;d-flex align-items-center&quot;&gt;
          &lt;a class=&quot;flex-shrink-0&quot; href=&quot;#&quot;&gt;
            &lt;img src=&quot;path-to-image&quot; width=&quot;64&quot; alt=&quot;Product&quot;/&gt;
          &lt;/a&gt;
          &lt;div class=&quot;ps-2&quot;&gt;
            &lt;6 class=&quot;widget-product-title&quot;&gt;&lt;a href=&quot;#&quot;&gt;TH Jeans City Backpack&lt;/a&gt;&lt;/h6&gt;
            &lt;div class=&quot;widget-product-meta&quot;&gt;
              &lt;span class=&quot;text-accent me-2&quot;&gt;$79.&lt;small&gt;00&lt;/small&gt;&lt;/span&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;

      &lt;!-- Item --&gt;
      &lt;div&gt;
        &lt;div class=&quot;d-flex align-items-center&quot;&gt;
          &lt;a class=&quot;flex-shrink-0&quot; href=&quot;#&quot;&gt;
            &lt;img src=&quot;path-to-image&quot; width=&quot;64&quot; alt=&quot;Product&quot;/&gt;
          &lt;/a&gt;
          &lt;div class=&quot;ps-2&quot;&gt;
            &lt;h6 class=&quot;widget-product-title&quot;&gt;&lt;a href=&quot;#&quot;&gt;3-Color Sun Stash Hat&lt;/a&gt;&lt;/h6&gt;
            &lt;div class=&quot;widget-product-meta&quot;&gt;
              &lt;span class=&quot;text-accent me-2&quot;&gt;$22.&lt;small&gt;00&lt;/small&gt;&lt;/span&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;

      &lt;!-- Item --&gt;
      &lt;div&gt;
        &lt;div class=&quot;d-flex align-items-center&quot;&gt;
          &lt;a class=&quot;flex-shrink-0&quot; href=&quot;#&quot;&gt;
            &lt;img src=&quot;path-to-image&quot; width=&quot;64&quot; alt=&quot;Product&quot;/&gt;
          &lt;/a&gt;
          &lt;div class=&quot;ps-2&quot;&gt;
            &lt;h6 class=&quot;widget-product-title&quot;&gt;&lt;a href=&quot;#&quot;&gt;Cotton Polo Regular Fit&lt;/a&gt;&lt;/h6&gt;
            &lt;div class=&quot;widget-product-meta&quot;&gt;
              &lt;span class=&quot;text-accent me-2&quot;&gt;$9.&lt;small&gt;00&lt;/small&gt;&lt;/span&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;</code></pre>
                  </div>
                  <div class="tab-pane fade" id="pug5" role="tabpanel">
                    <pre class="line-numbers"><code class="lang-pug">// Widget: Featured products carousel
.widget
  h3.widget-title Featured products

  .tns-carousel.tns-nav-start
    .tns-carousel-inner(data-carousel-options='{&quot;controls&quot;: false}')
  
      // Item
      div
        .d-flex.align-items-center
          a(href=&quot;#&quot;).flex-shrink-0
            img(src=&quot;path-to-image&quot;, width=&quot;64&quot;, alt=&quot;Product&quot;)
          .ps-2
            h6.widget-product-title
              a(href=&quot;#&quot;) Women Colorblock Sneakers
            .widget-product-meta
              span.text-accent.me-2
                | $150.
                small 00
      
      // Item
      div
        .d-flex.align-items-center
          a(href=&quot;#&quot;).flex-shrink-0
            img(src=&quot;path-to-image&quot;, width=&quot;64&quot;, alt=&quot;Product&quot;)
          .ps-2
            h6.widget-product-title
              a(href=&quot;#&quot;) TH Jeans City Backpack
            .widget-product-meta
              span.text-accent.me-2
                | $79.
                small 50
      
      // Item
      div
        .d-flex.align-items-center
          a(href=&quot;#&quot;).flex-shrink-0
            img(src=&quot;path-to-image&quot;, width=&quot;64&quot;, alt=&quot;Product&quot;)
          .ps-2
            h6.widget-product-title
              a(href=&quot;#&quot;) 3-Color Sun Stash Hat
            .widget-product-meta
              span.text-accent.me-2
                | $22.
                small 50

      // Item
      div
        .d-flex.align-items-center
          a(href=&quot;#&quot;).flex-shrink-0
            img(src=&quot;path-to-image&quot;, width=&quot;64&quot;, alt=&quot;Product&quot;)
          .ps-2
            h6.widget-product-title
              a(href=&quot;#&quot;) Cotton Polo Regular Fit
            .widget-product-meta
              span.text-accent.me-2
                | $9.
                small 00
</code></pre>
                  </div>
                </div>
              </div>
            </div>
          </section>
          <!-- Shopping cart-->
          <section class="pb-5 mb-md-2" id="widget-cart">
            <h2 class="h5 mb-3">Shopping cart</h2>
            <div class="card border-0 shadow">
              <div class="card-header">
                <ul class="nav nav-tabs card-header-tabs" role="tablist">
                  <li class="nav-item"><a class="nav-link active" href="#result6" data-bs-toggle="tab" role="tab" aria-controls="result6" aria-selected="true">Result</a></li>
                  <li class="nav-item"><a class="nav-link" href="#html6" data-bs-toggle="tab" role="tab" aria-controls="html6" aria-selected="false">HTML</a></li>
                  <li class="nav-item"><a class="nav-link" href="#pug6" data-bs-toggle="tab" role="tab" aria-controls="pug6" aria-selected="false">Pug</a></li>
                </ul>
              </div>
              <div class="card-body">
                <div class="tab-content">
                  <div class="tab-pane fade show active" id="result6" role="tabpanel">
                    <div class="widget widget-cart" style="max-width: 22rem;">
                      <h3 class="widget-title">Your cart</h3>
                      <div style="max-height: 15rem;" data-simplebar data-simplebar-auto-hide="false">
                        <div class="widget-cart-item pb-2 border-bottom">
                          <button class="btn-close text-danger" type="button" aria-label="Remove"><span aria-hidden="true">&times;</span></button>
                          <div class="d-flex align-items-center"><a class="flex-shrink-0" href="#"><img src="../img/shop/cart/widget/01.jpg" width="64" alt="Product"></a>
                            <div class="ps-2">
                              <h6 class="widget-product-title"><a href="#">Women Colorblock Sneakers</a></h6>
                              <div class="widget-product-meta"><span class="text-accent me-2">$150.<small>00</small></span><span class="text-muted">x 1</span></div>
                            </div>
                          </div>
                        </div>
                        <div class="widget-cart-item py-2 border-bottom">
                          <button class="btn-close text-danger" type="button" aria-label="Remove"><span aria-hidden="true">&times;</span></button>
                          <div class="d-flex align-items-center"><a class="flex-shrink-0" href="#"><img src="../img/shop/cart/widget/02.jpg" width="64" alt="Product"></a>
                            <div class="ps-2">
                              <h6 class="widget-product-title"><a href="#">TH Jeans City Backpack</a></h6>
                              <div class="widget-product-meta"><span class="text-accent me-2">$79.<small>50</small></span><span class="text-muted">x 1</span></div>
                            </div>
                          </div>
                        </div>
                        <div class="widget-cart-item py-2 border-bottom">
                          <button class="btn-close text-danger" type="button" aria-label="Remove"><span aria-hidden="true">&times;</span></button>
                          <div class="d-flex align-items-center"><a class="flex-shrink-0" href="#"><img src="../img/shop/cart/widget/03.jpg" width="64" alt="Product"></a>
                            <div class="ps-2">
                              <h6 class="widget-product-title"><a href="#">3-Color Sun Stash Hat</a></h6>
                              <div class="widget-product-meta"><span class="text-accent me-2">$22.<small>50</small></span><span class="text-muted">x 1</span></div>
                            </div>
                          </div>
                        </div>
                        <div class="widget-cart-item py-2 border-bottom">
                          <button class="btn-close text-danger" type="button" aria-label="Remove"><span aria-hidden="true">&times;</span></button>
                          <div class="d-flex align-items-center"><a class="flex-shrink-0" href="#"><img src="../img/shop/cart/widget/04.jpg" width="64" alt="Product"></a>
                            <div class="ps-2">
                              <h6 class="widget-product-title"><a href="#">Cotton Polo Regular Fit</a></h6>
                              <div class="widget-product-meta"><span class="text-accent me-2">$9.<small>00</small></span><span class="text-muted">x 1</span></div>
                            </div>
                          </div>
                        </div>
                      </div>
                      <div class="d-flex flex-wrap justify-content-between align-items-center py-3">
                        <div class="fs-sm me-2 py-2"><span class="text-muted">Subtotal:</span><span class="text-accent fs-base ms-1">$265.<small>00</small></span></div><a class="btn btn-outline-secondary btn-sm" href="#">Expand cart<i class="ci-arrow-right ms-1 me-n1"></i></a>
                      </div><a class="btn btn-primary btn-sm d-block w-100" href="#"><i class="ci-card me-2 fs-base align-middle"></i>Checkout</a>
                    </div>
                  </div>
                  <div class="tab-pane fade" id="html6" role="tabpanel">
                    <pre class="line-numbers"><code class="lang-html">&lt;!-- Widget: Shopping cart --&gt;
&lt;div class=&quot;widget widget-cart&quot;&gt;
  &lt;h3 class=&quot;widget-title&quot;&gt;Your cart&lt;/h3&gt;

  &lt;!-- Scrollable area --&gt;
  &lt;div style=&quot;max-height: 15rem;&quot; data-simplebar data-simplebar-auto-hide=&quot;false&quot;&gt;

    &lt;!-- Item --&gt;
    &lt;div class=&quot;widget-cart-item pb-2 border-bottom&quot;&gt;
      &lt;button class=&quot;btn-close text-danger&quot; type=&quot;button&quot; aria-label=&quot;Remove&quot;&gt;
        &lt;span aria-hidden=&quot;true&quot;&gt;&amp;times;&lt;/span&gt;
      &lt;/button&gt;
      &lt;div class=&quot;d-flex align-items-center&quot;&gt;
        &lt;a class=&quot;flex-shrink-0&quot; href=&quot;#&quot;&gt;
          &lt;img src=&quot;path-to-image&quot; width=&quot;64&quot; alt=&quot;Product&quot;/&gt;
        &lt;/a&gt;
        &lt;div class=&quot;ps-2&quot;&gt;
          &lt;h6 class=&quot;widget-product-title&quot;&gt;&lt;a href=&quot;#&quot;&gt;Women Colorblock Sneakers&lt;/a&gt;&lt;/h6&gt;
          &lt;div class=&quot;widget-product-meta&quot;&gt;
            &lt;span class=&quot;text-accent me-2&quot;&gt;$150.&lt;small&gt;00&lt;/small&gt;&lt;/span&gt;
            &lt;span class=&quot;text-muted&quot;&gt;x 1&lt;/span&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;

    &lt;!-- Item --&gt;
    &lt;div class=&quot;widget-cart-item py-2 border-bottom&quot;&gt;
      &lt;button class=&quot;btn-close text-danger&quot; type=&quot;button&quot; aria-label=&quot;Remove&quot;&gt;
        &lt;span aria-hidden=&quot;true&quot;&gt;&amp;times;&lt;/span&gt;
      &lt;/button&gt;
      &lt;div class=&quot;d-flex align-items-center&quot;&gt;
        &lt;a class=&quot;flex-shrink-0&quot; href=&quot;#&quot;&gt;
          &lt;img src=&quot;path-to-image&quot; width=&quot;64&quot; alt=&quot;Product&quot;/&gt;
        &lt;/a&gt;
        &lt;div class=&quot;ps-2&quot;&gt;
          &lt;6 class=&quot;widget-product-title&quot;&gt;&lt;a href=&quot;#&quot;&gt;TH Jeans City Backpack&lt;/a&gt;&lt;/h6&gt;
          &lt;div class=&quot;widget-product-meta&quot;&gt;
            &lt;span class=&quot;text-accent me-2&quot;&gt;$79.&lt;small&gt;00&lt;/small&gt;&lt;/span&gt;
            &lt;span class=&quot;text-muted&quot;&gt;x 1&lt;/span&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;

    &lt;!-- Item --&gt;
    &lt;div class=&quot;widget-cart-item py-2 border-bottom&quot;&gt;
      &lt;button class=&quot;btn-close text-danger&quot; type=&quot;button&quot; aria-label=&quot;Remove&quot;&gt;
        &lt;span aria-hidden=&quot;true&quot;&gt;&amp;times;&lt;/span&gt;
      &lt;/button&gt;
      &lt;div class=&quot;d-flex align-items-center&quot;&gt;
        &lt;a class=&quot;flex-shrink-0&quot; href=&quot;#&quot;&gt;
          &lt;img src=&quot;path-to-image&quot; width=&quot;64&quot; alt=&quot;Product&quot;/&gt;
        &lt;/a&gt;
        &lt;div class=&quot;ps-2&quot;&gt;
          &lt;h6 class=&quot;widget-product-title&quot;&gt;&lt;a href=&quot;#&quot;&gt;3-Color Sun Stash Hat&lt;/a&gt;&lt;/h6&gt;
          &lt;div class=&quot;widget-product-meta&quot;&gt;
            &lt;span class=&quot;text-accent me-2&quot;&gt;$22.&lt;small&gt;00&lt;/small&gt;&lt;/span&gt;
            &lt;span class=&quot;text-muted&quot;&gt;x 1&lt;/span&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;

    &lt;!-- Item --&gt;
    &lt;div class=&quot;widget-cart-item py-2 border-bottom&quot;&gt;
      &lt;button class=&quot;btn-close text-danger&quot; type=&quot;button&quot; aria-label=&quot;Remove&quot;&gt;
        &lt;span aria-hidden=&quot;true&quot;&gt;&amp;times;&lt;/span&gt;
      &lt;/button&gt;
      &lt;div class=&quot;d-flex align-items-center&quot;&gt;
        &lt;a class=&quot;flex-shrink-0&quot; href=&quot;#&quot;&gt;
          &lt;img src=&quot;path-to-image&quot; width=&quot;64&quot; alt=&quot;Product&quot;/&gt;
        &lt;/a&gt;
        &lt;div class=&quot;ps-2&quot;&gt;
          &lt;h6 class=&quot;widget-product-title&quot;&gt;&lt;a href=&quot;#&quot;&gt;Cotton Polo Regular Fit&lt;/a&gt;&lt;/h6&gt;
          &lt;div class=&quot;widget-product-meta&quot;&gt;
            &lt;span class=&quot;text-accent me-2&quot;&gt;$9.&lt;small&gt;00&lt;/small&gt;&lt;/span&gt;
            &lt;span class=&quot;text-muted&quot;&gt;x 1&lt;/span&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;

  &lt;!-- Footer --&gt;
  &lt;div class=&quot;d-flex flex-wrap justify-content-between align-items-center py-3&quot;&gt;
    &lt;div class=&quot;fs-sm me-2 py-2&quot;&gt;
      &lt;span class=&quot;text-muted&quot;&gt;Subtotal:&lt;/span&gt;
      &lt;span class=&quot;text-accent fs-base ms-1&quot;&gt;$265.&lt;small&gt;00&lt;/small&gt;&lt;/span&gt;
    &lt;/div&gt;
    &lt;a class=&quot;btn btn-outline-secondary btn-sm&quot; href=&quot;#&quot;&gt;
      Expand cart
      &lt;i class=&quot;ci-arrow-right ms-1 me-n1&quot;&gt;&lt;/i&gt;
    &lt;/a&gt;
  &lt;/div&gt;
  &lt;a class=&quot;btn btn-primary btn-sm d-block w-100&quot; href=&quot;#&quot;&gt;
    &lt;i class=&quot;ci-card me-2 fs-base align-middle&quot;&gt;&lt;/i&gt;
    Checkout
  &lt;/a&gt;
&lt;/div&gt;</code></pre>
                  </div>
                  <div class="tab-pane fade" id="pug6" role="tabpanel">
                    <pre class="line-numbers"><code class="lang-pug">// Widget: Shopping cart
.widget.widget-cart
  h3.widget-title Your cart

  // Scrollable area
  div(style=&quot;max-height: 15rem;&quot;, data-simplebar, data-simplebar-auto-hide=&quot;false&quot;)
  
    // Item
    .widget-cart-item.pb-2.border-bottom
      button(type=&quot;button&quot;, class=&quot;btn-close text-danger&quot;, aria-label=&quot;Remove&quot;)
        span(aria-hidden=&quot;true&quot;) &amp;times;
      .d-flex.align-items-center
        a(href=&quot;#&quot;).flex-shrink-0
          img(src=&quot;path-to-image&quot;, width=&quot;64&quot;, alt=&quot;Product&quot;)
        .ps-2
          h6.widget-product-title
            a(href=&quot;#&quot;) Women Colorblock Sneakers
          .widget-product-meta
            span.text-accent.me-2
              | $150.
              small 00
            span.text-muted x 1
    
    // Item
    .widget-cart-item.py-2.border-bottom
      button(type=&quot;button&quot;, class=&quot;btn-close text-danger&quot;, aria-label=&quot;Remove&quot;)
        span(aria-hidden=&quot;true&quot;) &amp;times;
      .d-flex.align-items-center
        a(href=&quot;#&quot;).flex-shrink-0
          img(src=&quot;path-to-image&quot;, width=&quot;64&quot;, alt=&quot;Product&quot;)
        .ps-2
          h6.widget-product-title
            a(href=&quot;#&quot;) TH Jeans City Backpack
          .widget-product-meta
            span.text-accent.me-2
              | $79.
              small 50
            span.text-muted x 1
    
    // Item
    .widget-cart-item.py-2.border-bottom
      button(type=&quot;button&quot;, class=&quot;btn-close text-danger&quot;, aria-label=&quot;Remove&quot;)
        span(aria-hidden=&quot;true&quot;) &amp;times;
      .d-flex.align-items-center
        a(href=&quot;#&quot;).flex-shrink-0
          img(src=&quot;path-to-image&quot;, width=&quot;64&quot;, alt=&quot;Product&quot;)
        .ps-2
          h6.widget-product-title
            a(href=&quot;#&quot;) 3-Color Sun Stash Hat
          .widget-product-meta
            span.text-accent.me-2
              | $22.
              small 50
            span.text-muted x 1

    // Item
    .widget-cart-item.py-2.border-bottom
      button(type=&quot;button&quot;, class=&quot;btn-close text-danger&quot;, aria-label=&quot;Remove&quot;)
        span(aria-hidden=&quot;true&quot;) &amp;times;
      .d-flex.align-items-center
        a(href=&quot;#&quot;).flex-shrink-0
          img(src=&quot;path-to-image&quot;, width=&quot;64&quot;, alt=&quot;Product&quot;)
        .ps-2
          h6.widget-product-title
            a(href=&quot;#&quot;) Cotton Polo Regular Fit
          .widget-product-meta
            span.text-accent.me-2
              | $9.
              small 00
            span.text-muted x 1

  // Footer
  .d-flex.flex-wrap.justify-content-between.align-items-center.py-3
    .fs-sm.me-2.py-2
      span.text-muted Subtotal:
      span.text-accent.fs-base.ms-1
        | $265.
        small 00
    a(href=&quot;#&quot;).btn.btn-outline-secondary.btn-sm
      | Expand cart
      i.ci-arrow-right.ms-1.me-n1
  a(href=&quot;#&quot;).btn.btn-primary.btn-sm.d-block.w-100
    i.ci-card.me-2.fs-base.align-middle
    | Checkout
</code></pre>
                  </div>
                </div>
              </div>
            </div>
          </section>
          <!-- Tag cloud-->
          <section class="pb-5 mb-md-2" id="widget-tags">
            <h2 class="h5 mb-3">Tag cloud</h2>
            <div class="card border-0 shadow">
              <div class="card-header">
                <ul class="nav nav-tabs card-header-tabs" role="tablist">
                  <li class="nav-item"><a class="nav-link active" href="#result7" data-bs-toggle="tab" role="tab" aria-controls="result7" aria-selected="true">Result</a></li>
                  <li class="nav-item"><a class="nav-link" href="#html7" data-bs-toggle="tab" role="tab" aria-controls="html7" aria-selected="false">HTML</a></li>
                  <li class="nav-item"><a class="nav-link" href="#pug7" data-bs-toggle="tab" role="tab" aria-controls="pug7" aria-selected="false">Pug</a></li>
                </ul>
              </div>
              <div class="card-body">
                <div class="tab-content">
                  <div class="tab-pane fade show active" id="result7" role="tabpanel">
                    <div class="widget" style="max-width: 25rem;">
                      <h3 class="widget-title">Popular tags</h3><a class="btn-tag me-2 mb-2" href="#">#fashion</a><a class="btn-tag me-2 mb-2" href="#">#gadgets</a><a class="btn-tag me-2 mb-2" href="#">#online shopping</a><a class="btn-tag me-2 mb-2" href="#">#travel</a><a class="btn-tag me-2 mb-2" href="#">#top brands</a><a class="btn-tag me-2 mb-2" href="#">#cartzilla news</a><a class="btn-tag active me-2 mb-2" href="#">#active tag</a>
                    </div>
                  </div>
                  <div class="tab-pane fade" id="html7" role="tabpanel">
                    <pre class="line-numbers"><code class="lang-html">&lt;!-- Widget: Tag cloud --&gt;
&lt;div class=&quot;widget&quot;&gt;
  &lt;h3 class=&quot;widget-title&quot;&gt;Popular tags&lt;/h3&gt;
  &lt;a href=&quot;#&quot; class=&quot;btn-tag me-2 mb-2&quot;&gt;#cartzilla news&lt;/a&gt;
  &lt;a href=&quot;#&quot; class=&quot;btn-tag active me-2 mb-2&quot;&gt;#active tag&lt;/a&gt;
  ...
&lt;/div&gt;</code></pre>
                  </div>
                  <div class="tab-pane fade" id="pug7" role="tabpanel">
                    <pre class="line-numbers"><code class="lang-pug">// Widget: Tag cloud
.widget
  h3.widget-title Popular tags
  a(href=&quot;#&quot;).btn-tag.me-2.mb-2 #cartzilla news
  a(href=&quot;#&quot;).btn-tag.active.me-2.mb-2 #active tag
  ...
</code></pre>
                  </div>
                </div>
              </div>
            </div>
          </section>
          <!-- Filter (checkboxes)-->
          <section class="pb-5 mb-md-2" id="widget-filter">
            <h2 class="h5 mb-3">Filter (checkboxes)</h2>
            <div class="card border-0 shadow">
              <div class="card-header">
                <ul class="nav nav-tabs card-header-tabs" role="tablist">
                  <li class="nav-item"><a class="nav-link active" href="#result8" data-bs-toggle="tab" role="tab" aria-controls="result8" aria-selected="true">Result</a></li>
                  <li class="nav-item"><a class="nav-link" href="#html8" data-bs-toggle="tab" role="tab" aria-controls="html8" aria-selected="false">HTML</a></li>
                  <li class="nav-item"><a class="nav-link" href="#pug8" data-bs-toggle="tab" role="tab" aria-controls="pug8" aria-selected="false">Pug</a></li>
                </ul>
              </div>
              <div class="card-body">
                <div class="tab-content">
                  <div class="tab-pane fade show active" id="result8" role="tabpanel">
                    <div class="widget widget-filter pb-2" style="max-width: 20rem;">
                      <h3 class="widget-title">Filter by brand</h3>
                      <div class="input-group input-group-sm mb-2">
                        <input class="widget-filter-search form-control rounded-end pe-5" type="text" placeholder="Search"><i class="ci-search position-absolute top-50 end-0 translate-middle-y fs-sm me-3"></i>
                      </div>
                      <ul class="widget-list widget-filter-list list-unstyled pt-1" style="max-height: 13rem;" data-simplebar data-simplebar-auto-hide="false">
                        <li class="widget-filter-item d-flex justify-content-between align-items-center mb-1">
                          <div class="form-check">
                            <input class="form-check-input" type="checkbox" id="adidas">
                            <label class="form-check-label widget-filter-item-text" for="adidas">Adidas</label>
                          </div><span class="fs-xs text-muted">425</span>
                        </li>
                        <li class="widget-filter-item d-flex justify-content-between align-items-center mb-1">
                          <div class="form-check">
                            <input class="form-check-input" type="checkbox" id="ataylor">
                            <label class="form-check-label widget-filter-item-text" for="ataylor">Ann Taylor</label>
                          </div><span class="fs-xs text-muted">15</span>
                        </li>
                        <li class="widget-filter-item d-flex justify-content-between align-items-center mb-1">
                          <div class="form-check">
                            <input class="form-check-input" type="checkbox" id="armani">
                            <label class="form-check-label widget-filter-item-text" for="armani">Armani</label>
                          </div><span class="fs-xs text-muted">18</span>
                        </li>
                        <li class="widget-filter-item d-flex justify-content-between align-items-center mb-1">
                          <div class="form-check">
                            <input class="form-check-input" type="checkbox" id="banana">
                            <label class="form-check-label widget-filter-item-text" for="banana">Banana Republic</label>
                          </div><span class="fs-xs text-muted">103</span>
                        </li>
                        <li class="widget-filter-item d-flex justify-content-between align-items-center mb-1">
                          <div class="form-check">
                            <input class="form-check-input" type="checkbox" id="bilabong">
                            <label class="form-check-label widget-filter-item-text" for="bilabong">Bilabong</label>
                          </div><span class="fs-xs text-muted">27</span>
                        </li>
                        <li class="widget-filter-item d-flex justify-content-between align-items-center mb-1">
                          <div class="form-check">
                            <input class="form-check-input" type="checkbox" id="birkenstock">
                            <label class="form-check-label widget-filter-item-text" for="birkenstock">Birkenstock</label>
                          </div><span class="fs-xs text-muted">10</span>
                        </li>
                        <li class="widget-filter-item d-flex justify-content-between align-items-center mb-1">
                          <div class="form-check">
                            <input class="form-check-input" type="checkbox" id="klein">
                            <label class="form-check-label widget-filter-item-text" for="klein">Calvin Klein</label>
                          </div><span class="fs-xs text-muted">365</span>
                        </li>
                        <li class="widget-filter-item d-flex justify-content-between align-items-center mb-1">
                          <div class="form-check">
                            <input class="form-check-input" type="checkbox" id="columbia">
                            <label class="form-check-label widget-filter-item-text" for="columbia">Columbia</label>
                          </div><span class="fs-xs text-muted">508</span>
                        </li>
                        <li class="widget-filter-item d-flex justify-content-between align-items-center mb-1">
                          <div class="form-check">
                            <input class="form-check-input" type="checkbox" id="converse">
                            <label class="form-check-label widget-filter-item-text" for="converse">Converse</label>
                          </div><span class="fs-xs text-muted">176</span>
                        </li>
                        <li class="widget-filter-item d-flex justify-content-between align-items-center mb-1">
                          <div class="form-check">
                            <input class="form-check-input" type="checkbox" id="dockers">
                            <label class="form-check-label widget-filter-item-text" for="dockers">Dockers</label>
                          </div><span class="fs-xs text-muted">54</span>
                        </li>
                        <li class="widget-filter-item d-flex justify-content-between align-items-center mb-1">
                          <div class="form-check">
                            <input class="form-check-input" type="checkbox" id="fruit">
                            <label class="form-check-label widget-filter-item-text" for="fruit">Fruit of the Loom</label>
                          </div><span class="fs-xs text-muted">739</span>
                        </li>
                        <li class="widget-filter-item d-flex justify-content-between align-items-center mb-1">
                          <div class="form-check">
                            <input class="form-check-input" type="checkbox" id="hanes">
                            <label class="form-check-label widget-filter-item-text" for="hanes">Hanes</label>
                          </div><span class="fs-xs text-muted">92</span>
                        </li>
                        <li class="widget-filter-item d-flex justify-content-between align-items-center mb-1">
                          <div class="form-check">
                            <input class="form-check-input" type="checkbox" id="choo">
                            <label class="form-check-label widget-filter-item-text" for="choo">Jimmy Choo</label>
                          </div><span class="fs-xs text-muted">17</span>
                        </li>
                        <li class="widget-filter-item d-flex justify-content-between align-items-center mb-1">
                          <div class="form-check">
                            <input class="form-check-input" type="checkbox" id="levis">
                            <label class="form-check-label widget-filter-item-text" for="levis">Levi's</label>
                          </div><span class="fs-xs text-muted">361</span>
                        </li>
                        <li class="widget-filter-item d-flex justify-content-between align-items-center mb-1">
                          <div class="form-check">
                            <input class="form-check-input" type="checkbox" id="lee">
                            <label class="form-check-label widget-filter-item-text" for="lee">Lee</label>
                          </div><span class="fs-xs text-muted">264</span>
                        </li>
                        <li class="widget-filter-item d-flex justify-content-between align-items-center mb-1">
                          <div class="form-check">
                            <input class="form-check-input" type="checkbox" id="wearhouse">
                            <label class="form-check-label widget-filter-item-text" for="wearhouse">Men's Wearhouse</label>
                          </div><span class="fs-xs text-muted">75</span>
                        </li>
                        <li class="widget-filter-item d-flex justify-content-between align-items-center mb-1">
                          <div class="form-check">
                            <input class="form-check-input" type="checkbox" id="newbalance">
                            <label class="form-check-label widget-filter-item-text" for="newbalance">New Balance</label>
                          </div><span class="fs-xs text-muted">218</span>
                        </li>
                        <li class="widget-filter-item d-flex justify-content-between align-items-center mb-1">
                          <div class="form-check">
                            <input class="form-check-input" type="checkbox" id="nike">
                            <label class="form-check-label widget-filter-item-text" for="nike">Nike</label>
                          </div><span class="fs-xs text-muted">810</span>
                        </li>
                        <li class="widget-filter-item d-flex justify-content-between align-items-center mb-1">
                          <div class="form-check">
                            <input class="form-check-input" type="checkbox" id="navy">
                            <label class="form-check-label widget-filter-item-text" for="navy">Old Navy</label>
                          </div><span class="fs-xs text-muted">147</span>
                        </li>
                        <li class="widget-filter-item d-flex justify-content-between align-items-center mb-1">
                          <div class="form-check">
                            <input class="form-check-input" type="checkbox" id="polo">
                            <label class="form-check-label widget-filter-item-text" for="polo">Polo Ralph Lauren</label>
                          </div><span class="fs-xs text-muted">64</span>
                        </li>
                        <li class="widget-filter-item d-flex justify-content-between align-items-center mb-1">
                          <div class="form-check">
                            <input class="form-check-input" type="checkbox" id="puma">
                            <label class="form-check-label widget-filter-item-text" for="puma">Puma</label>
                          </div><span class="fs-xs text-muted">370</span>
                        </li>
                        <li class="widget-filter-item d-flex justify-content-between align-items-center mb-1">
                          <div class="form-check">
                            <input class="form-check-input" type="checkbox" id="reebok">
                            <label class="form-check-label widget-filter-item-text" for="reebok">Reebok</label>
                          </div><span class="fs-xs text-muted">506</span>
                        </li>
                        <li class="widget-filter-item d-flex justify-content-between align-items-center mb-1">
                          <div class="form-check">
                            <input class="form-check-input" type="checkbox" id="skechers">
                            <label class="form-check-label widget-filter-item-text" for="skechers">Skechers</label>
                          </div><span class="fs-xs text-muted">209</span>
                        </li>
                        <li class="widget-filter-item d-flex justify-content-between align-items-center mb-1">
                          <div class="form-check">
                            <input class="form-check-input" type="checkbox" id="hilfiger">
                            <label class="form-check-label widget-filter-item-text" for="hilfiger">Tommy Hilfiger</label>
                          </div><span class="fs-xs text-muted">487</span>
                        </li>
                        <li class="widget-filter-item d-flex justify-content-between align-items-center mb-1">
                          <div class="form-check">
                            <input class="form-check-input" type="checkbox" id="armour">
                            <label class="form-check-label widget-filter-item-text" for="armour">Under Armour</label>
                          </div><span class="fs-xs text-muted">90</span>
                        </li>
                        <li class="widget-filter-item d-flex justify-content-between align-items-center mb-1">
                          <div class="form-check">
                            <input class="form-check-input" type="checkbox" id="urban">
                            <label class="form-check-label widget-filter-item-text" for="urban">Urban Outfitters</label>
                          </div><span class="fs-xs text-muted">152</span>
                        </li>
                        <li class="widget-filter-item d-flex justify-content-between align-items-center mb-1">
                          <div class="form-check">
                            <input class="form-check-input" type="checkbox" id="vsecret">
                            <label class="form-check-label widget-filter-item-text" for="vsecret">Victoria's Secret</label>
                          </div><span class="fs-xs text-muted">238</span>
                        </li>
                        <li class="widget-filter-item d-flex justify-content-between align-items-center mb-1">
                          <div class="form-check">
                            <input class="form-check-input" type="checkbox" id="wolverine">
                            <label class="form-check-label widget-filter-item-text" for="wolverine">Wolverine</label>
                          </div><span class="fs-xs text-muted">29</span>
                        </li>
                        <li class="widget-filter-item d-flex justify-content-between align-items-center mb-1">
                          <div class="form-check">
                            <input class="form-check-input" type="checkbox" id="wrangler">
                            <label class="form-check-label widget-filter-item-text" for="wrangler">Wrangler</label>
                          </div><span class="fs-xs text-muted">115</span>
                        </li>
                      </ul>
                    </div>
                  </div>
                  <div class="tab-pane fade" id="html8" role="tabpanel">
                    <pre class="line-numbers"><code class="lang-html">&lt;!-- Widget: Filter (checkboxes) --&gt;
&lt;div class=&quot;widget widget-filter&quot;&gt;
  &lt;h3 class=&quot;widget-title&quot;&gt;Filter by brand&lt;/h3&gt;
  &lt;div class=&quot;input-group input-group-sm mb-2&quot;&gt;
    &lt;input type=&quot;text&quot; class=&quot;widget-filter-search form-control rounded-end pe-5&quot; placeholder=&quot;Search&quot;&gt;
    &lt;i class=&quot;ci-search position-absolute top-50 end-0 translate-middle-y fs-sm me-3&quot;&gt;&lt;/i&gt;
  &lt;/div&gt;
  &lt;ul class=&quot;widget-list widget-filter-list list-unstyled pt-1&quot; style=&quot;max-height: 13rem;&quot; data-simplebar data-simplebar-auto-hide=&quot;false&quot;&gt;
    &lt;li class=&quot;widget-filter-item d-flex justify-content-between align-items-center mb-1&quot;&gt;
      &lt;div class=&quot;form-check&quot;&gt;
        &lt;input type=&quot;checkbox&quot; id=&quot;adidas&quot; class=&quot;form-check-input&quot;&gt;
        &lt;label class=&quot;form-check-label widget-filter-item-text&quot; for=&quot;adidas&quot;&gt;Adidas&lt;/label&gt;
      &lt;/div&gt;
      &lt;span class=&quot;fs-xs text-muted&quot;&gt;425&lt;/span&gt;
    &lt;/li&gt;
    &lt;li class=&quot;widget-filter-item d-flex justify-content-between align-items-center mb-1&quot;&gt;
      &lt;div class=&quot;form-check&quot;&gt;
        &lt;input type=&quot;checkbox&quot; id=&quot;ataylor&quot; class=&quot;form-check-input&quot;&gt;
        &lt;label class=&quot;form-check-label widget-filter-item-text&quot; for=&quot;ataylor&quot;&gt;Ann Taylor&lt;/label&gt;
      &lt;/div&gt;
      &lt;span class=&quot;fs-xs text-muted&quot;&gt;15&lt;/span&gt;
    &lt;/li&gt;
    &lt;!-- Add as many items as you need --&gt;
  &lt;/ul&gt;
&lt;/div&gt;</code></pre>
                  </div>
                  <div class="tab-pane fade" id="pug8" role="tabpanel">
                    <pre class="line-numbers"><code class="lang-pug">// Widget: Filter (checkboxes)
.widget.widget-filter
  h3.widget-title Filter by brand
  .input-group.input-group-sm.mb-2
    input(type=&quot;text&quot;, placeholder=&quot;Search&quot;).widget-filter-search.form-control.rounded-end.pe-5
    i.ci-search.position-absolute.top-50.end-0.translate-middle-y.fs-sm.me-3
  ul(style=&quot;max-height: 13rem;&quot;, data-simplebar, data-simplebar-auto-hide=&quot;false&quot;).widget-list.widget-filter-list.list-unstyled.pt-1
    li.widget-filter-item.d-flex.justify-content-between.align-items-center.mb-1
      .form-check
        input(type=&quot;checkbox&quot;, id=&quot;adidas&quot;).form-check-input
        label.form-check-label.widget-filter-item-text(for=&quot;adidas&quot;) Adidas
      span.fs-xs.text-muted 425
    li.widget-filter-item.d-flex.justify-content-between.align-items-center.mb-1
      .form-check
        input(type=&quot;checkbox&quot;, id=&quot;ataylor&quot;).form-check-input
        label.form-check-label.widget-filter-item-text(for=&quot;ataylor&quot;) Ann Taylor
      span.fs-xs.text-muted 15
    //- Add as many items as you need
</code></pre>
                  </div>
                </div>
              </div>
            </div>
          </section>
          <!-- Subscription (MailChimp Ajax)-->
          <section class="pb-5 mb-md-2" id="widget-subscription">
            <h2 class="h5 mb-3">Subscription (MailChimp Ajax)</h2>
            <div class="card border-0 shadow">
              <div class="card-header">
                <ul class="nav nav-tabs card-header-tabs" role="tablist">
                  <li class="nav-item"><a class="nav-link active" href="#result9" data-bs-toggle="tab" role="tab" aria-controls="result9" aria-selected="true">Result</a></li>
                  <li class="nav-item"><a class="nav-link" href="#html9" data-bs-toggle="tab" role="tab" aria-controls="html9" aria-selected="false">HTML</a></li>
                  <li class="nav-item"><a class="nav-link" href="#pug9" data-bs-toggle="tab" role="tab" aria-controls="pug9" aria-selected="false">Pug</a></li>
                </ul>
              </div>
              <div class="card-body">
                <div class="tab-content">
                  <div class="tab-pane fade show active" id="result9" role="tabpanel">
                    <div class="widget pb-2" style="max-width: 24rem;">
                      <h3 class="widget-title">Subscribe</h3>
                      <form class="subscription-form validate" action="https://studio.us12.list-manage.com/subscribe/post?u=c7103e2c981361a6639545bd5&amp;amp;id=29ca296126" method="post" name="mc-embedded-subscribe-form" target="_blank" novalidate>
                        <div class="input-group flex-nowrap"><i class="ci-mail position-absolute top-50 translate-middle-y text-muted fs-base ms-3"></i>
                          <input class="form-control rounded-start" type="email" name="EMAIL" placeholder="Your email" required>
                          <button class="btn btn-primary" type="submit" name="subscribe">Subscribe*</button>
                        </div>
                        <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
                        <div style="position: absolute; left: -5000px;" aria-hidden="true">
                          <input class="subscription-form-antispam" type="text" name="b_c7103e2c981361a6639545bd5_29ca296126" tabindex="-1">
                        </div>
                        <div class="form-text">*Subscribe to our newsletter to receive early discount offers, updates and new products info.</div>
                        <div class="subscription-status"></div>
                      </form>
                    </div>
                  </div>
                  <div class="tab-pane fade" id="html9" role="tabpanel">
                    <pre class="line-numbers"><code class="lang-html">&lt;!-- Widget: Subscription (MailChimp Ajax)
        Instructions how to get MailChimp action link:
        1. Log in to your MailChimp Dashboard / Audience / Manage Audience / Signup forms / Embedded forms
        2. In the provided code find form action link and copy it
        3. Paste it to the form action attribute below
        4. Also in the form code provided by MailChimp find antispam input and copy it name attribute contents
        5. Paste what you have copied from name attribute to the name attribute of input with class &quot;subscription-form-antispam&quot;
--&gt;
&lt;div class=&quot;widget&quot;&gt;
  &lt;h3 class=&quot;widget-title&quot;&gt;Subscribe&lt;/h3&gt;
  &lt;form class=&quot;subscription-form validate&quot; action=&quot;mailchimp-embedded-form-atcion-link&quot; method=&quot;post&quot; name=&quot;mc-embedded-subscribe-form&quot; target=&quot;_blank&quot; novalidate&gt;
    &lt;div class=&quot;input-group flex-nowrap&quot;&gt;
      &lt;i class=&quot;ci-mail position-absolute top-50 translate-middle-y text-muted fs-base ms-3&quot;&gt;&lt;/i&gt;
      &lt;input class=&quot;form-control rounded-start&quot; type=&quot;email&quot; name=&quot;EMAIL&quot; placeholder=&quot;Your email&quot; required&gt;
      &lt;button class=&quot;btn btn-primary&quot; type=&quot;submit&quot; name=&quot;subscribe&quot;&gt;Subscribe*&lt;/button&gt;
    &lt;/div&gt;
    &lt;!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups--&gt;
    &lt;div style=&quot;position: absolute; left: -5000px;&quot; aria-hidden=&quot;true&quot;&gt;
      &lt;input type=&quot;text&quot; class=&quot;subscription-form-antispam&quot; name=&quot;mailchimp-embedded-form-antispam-name-attribute&quot; tabindex=&quot;-1&quot;&gt;
    &lt;/div&gt;
    &lt;div class=&quot;form-text&quot;&gt;*Subscribe to our newsletter to receive early discount offers, updates and new products info.&lt;/div&gt;
    &lt;div class=&quot;subscription-status&quot;&gt;&lt;/div&gt;
  &lt;/form&gt;
&lt;/div&gt;</code></pre>
                  </div>
                  <div class="tab-pane fade" id="pug9" role="tabpanel">
                    <pre class="line-numbers"><code class="lang-pug">// Widget: Subscription (MailChimp Ajax)
// Instructions how to get MailChimp action link:
// 1. Log in to your MailChimp Dashboard / Audience / Manage Audience / Signup forms / Embedded forms
// 2. In the provided code find form action link and copy it
// 3. Paste it to the form action attribute below
// 4. Also in the form code provided by MailChimp find antispam input and copy it name attribute contents
// 5. Paste what you have copied from name attribute to the name attribute of input with class &quot;subscription-form-antispam&quot;
form(action=&quot;mailchimp-embedded-form-atcion-link&quot;, method=&quot;post&quot;, name=&quot;mc-embedded-subscribe-form&quot;, target=&quot;_blank&quot;, novalidate).subscription-form.validate
  .input-group.flex-nowrap
    i.ci-mail.position-absolute.top-50.translate-middle-y.text-muted.fs-base.ms-3
    input(type=&quot;email&quot;, name=&quot;EMAIL&quot;, placeholder=&quot;Your email&quot;, required).form-control.rounded-start
    button(type=&quot;submit&quot;, name=&quot;subscribe&quot;).btn.btn-primary Subscribe*
  // real people should not fill this in and expect good things - do not remove this or risk form bot signups
  div(style=&quot;position: absolute; left: -5000px;&quot; aria-hidden=&quot;true&quot;)
    input(type=&quot;text&quot;, name=&quot;mailchimp-embedded-form-antispam-name-attribute&quot;, tabindex=&quot;-1&quot;).subscription-form-antispam
  .form-text *Subscribe to our newsletter to receive early discount offers, updates and new products info.
  .subscription-status
</code></pre>
                  </div>
                </div>
              </div>
            </div>
          </section>
          <!-- Contact details-->
          <section class="pb-5 mb-md-2" id="widget-contacts">
            <h2 class="h5 mb-3">Contact details</h2>
            <div class="card border-0 shadow">
              <div class="card-header">
                <ul class="nav nav-tabs card-header-tabs" role="tablist">
                  <li class="nav-item"><a class="nav-link active" href="#result10" data-bs-toggle="tab" role="tab" aria-controls="result10" aria-selected="true">Result</a></li>
                  <li class="nav-item"><a class="nav-link" href="#html10" data-bs-toggle="tab" role="tab" aria-controls="html10" aria-selected="false">HTML</a></li>
                  <li class="nav-item"><a class="nav-link" href="#pug10" data-bs-toggle="tab" role="tab" aria-controls="pug10" aria-selected="false">Pug</a></li>
                </ul>
              </div>
              <div class="card-body">
                <div class="tab-content">
                  <div class="tab-pane fade show active" id="result10" role="tabpanel">
                    <div class="widget" style="max-width: 18rem;">
                      <ul class="widget-list">
                        <li class="d-flex pb-3 border-bottom"><i class="ci-location fs-lg mt-2 text-primary"></i>
                          <div class="ps-3"><span class="fs-ms text-muted">Find us</span><a class="d-block text-heading fs-sm" href="#">769, Industrial Dr, West Chicago, IL 60185, USA</a></div>
                        </li>
                        <li class="d-flex pt-2 pb-3 border-bottom"><i class="ci-phone fs-lg mt-2 mb-0 text-primary"></i>
                          <div class="ps-3"><span class="fs-ms text-muted">Call us</span><a class="d-block text-heading fs-sm" href="tel:+184725276533">+1 (847) 252 765 33</a></div>
                        </li>
                        <li class="d-flex pt-2"><i class="ci-mail fs-lg mt-2 mb-0 text-primary"></i>
                          <div class="ps-3"><span class="fs-ms text-muted">Write us</span><a class="d-block text-heading fs-sm" href="mailto:email@example.com">email@example.com</a></div>
                        </li>
                      </ul>
                    </div>
                  </div>
                  <div class="tab-pane fade" id="html10" role="tabpanel">
                    <pre class="line-numbers"><code class="lang-html">&lt;!-- Widget: Contact details --&gt;
&lt;div class=&quot;widget&quot;&gt;
  &lt;ul class=&quot;widget-list&quot;&gt;
    &lt;li class=&quot;d-flex pb-3 border-bottom&quot;&gt;
      &lt;i class=&quot;ci-location fs-lg mt-2 text-primary&quot;&gt;&lt;/i&gt;
      &lt;div class=&quot;ps-3&quot;&gt;
        &lt;span class=&quot;fs-ms text-muted&quot;&gt;Find us&lt;/span&gt;
        &lt;a class=&quot;d-block text-heading fs-sm&quot; href=&quot;#&quot;&gt;769, Industrial Dr, West Chicago, IL 60185, USA&lt;/a&gt;
      &lt;/div&gt;
    &lt;/li&gt;
    &lt;li class=&quot;d-flex pt-2 pb-3 border-bottom&quot;&gt;
      &lt;i class=&quot;ci-phone fs-lg mt-2 text-primary&quot;&gt;&lt;/i&gt;
      &lt;div class=&quot;ps-3&quot;&gt;
        &lt;span class=&quot;fs-ms text-muted&quot;&gt;Call us&lt;/span&gt;
        &lt;a class=&quot;d-block text-heading fs-sm&quot; href=&quot;tel:+184725276533&quot;&gt;+1 (847) 252 765 33&lt;/a&gt;
      &lt;/div&gt;
    &lt;/li&gt;
    &lt;li class=&quot;d-flex pt-2&quot;&gt;
      &lt;i class=&quot;ci-mail fs-lg mt-2 text-primary&quot;&gt;&lt;/i&gt;
      &lt;div class=&quot;ps-3&quot;&gt;
        &lt;span class=&quot;fs-ms text-muted&quot;&gt;Write us&lt;/span&gt;
        &lt;a class=&quot;d-block text-heading fs-sm&quot; href=&quot;mailto:email@example.com&quot;&gt;email@example.com&lt;/a&gt;
      &lt;/div&gt;
    &lt;/li&gt;
  &lt;/ul&gt;
&lt;/div&gt;</code></pre>
                  </div>
                  <div class="tab-pane fade" id="pug10" role="tabpanel">
                    <pre class="line-numbers"><code class="lang-pug">// Widget: Contact details
.widget
  ul.widget-list
    li.d-flex.pb-3.border-bottom
      i.ci-location.fs-lg.mt-2.text-primary
      .ps-3
        span.fs-ms.text-muted Find us
        a.d-block.text-heading.fs-sm(href=&quot;#&quot;) 769, Industrial Dr, West Chicago, IL 60185, USA
    li.d-flex.pt-2.pb-3.border-bottom
      i.ci-phone.fs-lg.mt-2.text-primary
      .ps-3
        span.fs-ms.text-muted Call us
        a.d-block.text-heading.fs-sm(href=&quot;tel:+184725276533&quot;) +1 (847) 252 765 33
    li.d-flex.pt-2
      i.ci-mail.fs-lg.mt-2.text-primary
      .ps-3
        span.fs-ms.text-muted Write us
        a.d-block.text-heading.fs-sm(href=&quot;mailto:email@example.com&quot;) email@example.com</code></pre>
                  </div>
                </div>
              </div>
            </div>
          </section>
        </div>
        <!-- Quick (anchor) navigation-->
        <div class="col-xxl-3 d-none d-xxl-block ps-5">
          <aside class="sticky-top pt-5">
            <div class="pt-5 mt-5">
              <div class="widget widget-links ps-4 border-start">
                <h3 class="widget-title">Jump to</h3>
                <ul class="widget-list">
                  <li class="widget-list-item"><a class="widget-list-link" data-scroll href="#widget-categories">Categories</a>
                  </li>
                  <li class="widget-list-item"><a class="widget-list-link" data-scroll href="#widget-range">Price range</a>
                  </li>
                  <li class="widget-list-item"><a class="widget-list-link" data-scroll href="#widget-links">Links</a>
                  </li>
                  <li class="widget-list-item"><a class="widget-list-link" data-scroll href="#widget-products-list">Featured products list</a>
                  </li>
                  <li class="widget-list-item"><a class="widget-list-link" data-scroll href="#widget-products-carousel">Featured products carousel</a>
                  </li>
                  <li class="widget-list-item"><a class="widget-list-link" data-scroll href="#widget-cart">Shopping cart</a>
                  </li>
                  <li class="widget-list-item"><a class="widget-list-link" data-scroll href="#widget-tags">Tag cloud</a>
                  </li>
                  <li class="widget-list-item"><a class="widget-list-link" data-scroll href="#widget-filter">Filter (checkboxes)</a>
                  </li>
                  <li class="widget-list-item"><a class="widget-list-link" data-scroll href="#widget-subscription">Subscription (MailChimp Ajax)</a>
                  </li>
                  <li class="widget-list-item"><a class="widget-list-link" data-scroll href="#widget-contacts">Contact details</a>
                  </li>
                </ul>
              </div>
            </div>
          </aside>
        </div>
      </section>
    </main>
    <!-- Back To Top Button--><a class="btn-scroll-top" href="#top" data-scroll data-fixed-element><span class="btn-scroll-top-tooltip text-muted fs-sm me-2">Top</span><i class="btn-scroll-top-icon ci-arrow-up">   </i></a>
    <!-- Vendor scrits: js libraries and plugins-->
    <script src="../vendor/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
    <script src="../vendor/simplebar/dist/simplebar.min.js"></script>
    <script src="../vendor/tiny-slider/dist/min/tiny-slider.js"></script>
    <script src="../vendor/smooth-scroll/dist/smooth-scroll.polyfills.min.js"></script>
    <script src="../vendor/prismjs/components/prism-core.min.js"></script>
    <script src="../vendor/prismjs/components/prism-markup.min.js"></script>
    <script src="../vendor/prismjs/components/prism-clike.min.js"></script>
    <script src="../vendor/prismjs/components/prism-javascript.min.js"></script>
    <script src="../vendor/prismjs/components/prism-pug.min.js"></script>
    <script src="../vendor/prismjs/plugins/toolbar/prism-toolbar.min.js"></script>
    <script src="../vendor/prismjs/plugins/copy-to-clipboard/prism-copy-to-clipboard.min.js"></script>
    <script src="../vendor/prismjs/plugins/line-numbers/prism-line-numbers.min.js"></script>
    <script src="../vendor/nouislider/distribute/nouislider.min.js"></script>
    <!-- Main theme script-->
    <script src="../js/theme.min.js"></script>
  </body>
</html>